update m issues + digit change numbers

package-lock.json

@@ -20,6 +20,7 @@
                 "sass": "^1.62.1",
                 "swiper": "^9.4.1",
                 "viem": "^1.4.1",
+                "vite-svg-loader": "^4.0.0",
                 "vue": "^3.3.2",
                 "vue-collapsed": "^1.2.8",
                 "vue-router": "^4.2.0",
@@ -1534,6 +1535,14 @@
                 "@stablelib/wipe": "^1.0.1"
             }
         },
+        "node_modules/@trysound/sax": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+            "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
         "node_modules/@types/connect": {
             "version": "3.4.35",
             "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -2472,8 +2481,7 @@
         "node_modules/boolbase": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
-            "dev": true
         },
         "node_modules/borsh": {
             "version": "0.7.0",
@@ -2712,6 +2720,44 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/css-select": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+            "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+            "dependencies": {
+                "boolbase": "^1.0.0",
+                "css-what": "^6.1.0",
+                "domhandler": "^5.0.2",
+                "domutils": "^3.0.1",
+                "nth-check": "^2.0.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
+        "node_modules/css-tree": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+            "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+            "dependencies": {
+                "mdn-data": "2.0.30",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+            }
+        },
+        "node_modules/css-what": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+            "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+            "engines": {
+                "node": ">= 6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
         "node_modules/cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2724,6 +2770,36 @@
                 "node": ">=4"
             }
         },
+        "node_modules/csso": {
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+            "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+            "dependencies": {
+                "css-tree": "~2.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/css-tree": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+            "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+            "dependencies": {
+                "mdn-data": "2.0.28",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/mdn-data": {
+            "version": "2.0.28",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+            "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+        },
         "node_modules/csstype": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -2800,6 +2876,57 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
+            },
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+            }
+        },
+        "node_modules/domelementtype": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ]
+        },
+        "node_modules/domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dependencies": {
+                "domelementtype": "^2.3.0"
+            },
+            "engines": {
+                "node": ">= 4"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
+            }
+        },
+        "node_modules/domutils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+            "dependencies": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domutils?sponsor=1"
+            }
+        },
         "node_modules/duplexify": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.2.tgz",
@@ -2848,6 +2975,17 @@
                 "once": "^1.4.0"
             }
         },
+        "node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/es6-promise": {
             "version": "4.2.8",
             "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
@@ -3995,6 +4133,11 @@
                 "sourcemap-codec": "^1.4.8"
             }
         },
+        "node_modules/mdn-data": {
+            "version": "2.0.30",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
+        },
         "node_modules/micro-ftch": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/micro-ftch/-/micro-ftch-0.3.1.tgz",
@@ -4114,7 +4257,6 @@
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
             "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-            "dev": true,
             "dependencies": {
                 "boolbase": "^1.0.0"
             },
@@ -5004,6 +5146,37 @@
                 "node": ">=8"
             }
         },
+        "node_modules/svgo": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+            "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
+            "dependencies": {
+                "@trysound/sax": "0.2.0",
+                "commander": "^7.2.0",
+                "css-select": "^5.1.0",
+                "css-tree": "^2.2.1",
+                "csso": "^5.0.5",
+                "picocolors": "^1.0.0"
+            },
+            "bin": {
+                "svgo": "bin/svgo"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/svgo"
+            }
+        },
+        "node_modules/svgo/node_modules/commander": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
         "node_modules/swiper": {
             "version": "9.4.1",
             "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.1.tgz",
@@ -5381,6 +5554,15 @@
                 }
             }
         },
+        "node_modules/vite-svg-loader": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz",
+            "integrity": "sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==",
+            "dependencies": {
+                "@vue/compiler-sfc": "^3.2.20",
+                "svgo": "^3.0.2"
+            }
+        },
         "node_modules/vite/node_modules/@esbuild/android-arm": {
             "version": "0.18.20",
             "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",

package.json

@@ -21,6 +21,7 @@
         "sass": "^1.62.1",
         "swiper": "^9.4.1",
         "viem": "^1.4.1",
+        "vite-svg-loader": "^4.0.0",
         "vue": "^3.3.2",
         "vue-collapsed": "^1.2.8",
         "vue-router": "^4.2.0",

src/App.vue

@@ -16,6 +16,10 @@ import ConnectWallet from "./components/ConnectWallet.vue";
 import BloodSplash from "./components/BloodSplash.vue";
 import { getNetwork, fetchTransaction } from "@wagmi/core";
 
+import profileIcon from "@/assets/img/profile-icon.svg?component";
+import cycleIcon from "@/assets/img/cycle-icon.svg?component";
+import homeIcon from "@/assets/img/home-icon.svg?component";
+
 const isMobile = ref(false);
 const showPanel = ref(false);
 const splashBlood = ref(0);
@@ -124,13 +128,19 @@ onMounted(async () => {
 	</div>
 	<div class="mobile-navigation-bar" v-if="isMobile">
 		<div @click="changeRoute('home')" :class="{ active: route.name === 'home' }">
-			<font-awesome-icon icon="fa-droplet" />
+			<!-- <font-awesome-icon icon="fa-droplet" /> -->
+			<!-- <img src="/assets/img/sacrifice-icon.png" alt="sacrifice-icon" /> -->
+			<homeIcon />
 		</div>
 		<div @click="changeRoute('cycle')" :class="{ active: route.name === 'cycle' }">
-			<font-awesome-icon icon="fa-moon" />
+			<!-- <font-awesome-icon icon="fa-moon" /> -->
+			<!-- <img src="/assets/img/cycle-icon.png" alt="cycle-icon" /> -->
+			<cycleIcon />
 		</div>
 		<div @click="changeRoute('profile')" :class="{ active: route.name === 'profile' }">
-			<font-awesome-icon icon="fa-person" />
+			<!-- <img src="/assets/img/profile-icon.svg  " alt="profile-icon" /> -->
+			<profileIcon />
+			<!-- <font-awesome-icon icon="fa-person" /> -->
 		</div>
 	</div>
 </template>
@@ -201,8 +211,14 @@ onMounted(async () => {
     div
         font-size: 40px
         cursor: pointer
+        -webkit-tap-highlight-color: transparent
+
+
         &.active
+            svg
+                path
                     color: var(--purple)
+                    fill: var(--purple)
 
 .modal-overlay
     background-color: rgb(15, 15, 15, 0.7)

src/assets/img/cycle-icon.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5332 0.223612C14.5688 -0.68935 16.3324 1.37298 15.6956 3.16362C13.5347 9.2395 14.8624 16.1404 19.3476 20.6276C23.8556 25.1377 30.7963 26.4633 36.8868 24.2619C38.659 23.6213 40.6637 25.369 39.7876 27.3579C39.7616 27.4167 39.7355 27.4752 39.7091 27.534C38.1498 30.9948 35.6553 34.2494 32.4281 36.4315C28.9883 38.7574 24.9319 40 20.7803 40H20.7783C15.9506 39.9948 11.2749 38.3095 7.5529 35.2332C3.83085 32.1569 1.2942 27.8809 0.377993 23.1382C-0.538209 18.3955 0.22314 13.4818 2.53147 9.23928C4.71976 5.21736 8.39949 2.09189 12.4733 0.250546L12.5332 0.223612Z" fill="#F9F9FA"/>
+</svg>

src/assets/img/home-icon.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="40" viewBox="0 0 30 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4808 0.762253C16.1401 0.28454 15.5867 0 14.9994 0C14.4107 0 13.8586 0.283234 13.5153 0.762253C9.85024 5.87744 0.667969 19.3317 0.667969 25.6686C0.667969 33.5835 7.08316 40 14.9981 40C22.9143 40 29.3308 33.5835 29.3308 25.6686C29.3321 19.3317 20.1459 5.87744 16.4808 0.762253Z" fill="#F9F9FA"/>
+</svg>

src/assets/img/profile-icon.svg

@@ -0,0 +1,12 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1478_31440)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8333 12C11.8333 7.58797 15.498 7.6 19.9997 7.6C24.5035 7.6 28.1661 7.58797 28.1661 12C28.1661 16.412 24.5035 20 19.9997 20C15.498 20 11.8333 16.412 11.8333 12ZM39.9114 35.2719C38.4271 28.5539 33.7845 23.5959 27.674 21.3459C30.912 18.7919 32.8005 14.6619 32.1063 10.1399C31.302 4.89386 26.8472 0.695954 21.4697 0.0839537C14.0464 -0.762046 7.75014 4.89797 7.75014 12C7.75014 15.78 9.53858 19.1479 12.3274 21.3459C6.21487 23.5959 1.57433 28.5539 0.088048 35.2719C-0.450933 37.7139 1.558 40 4.10795 40H35.8915C38.4434 40 40.4524 37.7139 39.9114 35.2719Z" fill="#F9F9FA"/>
+<path d="M17.2809 18.8008L16.4813 16.4008L15.2025 15.2008L19.3594 15.2008L18.0813 16.4008L17.2809 18.8008Z" fill="#F9F9FA"/>
+<path d="M23.359 18.8008L22.5594 16.4008L21.2806 15.2008L25.4375 15.2008L24.1594 16.4008L23.359 18.8008Z" fill="#F9F9FA"/>
+</g>
+<defs>
+<clipPath id="clip0_1478_31440">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/BloodChart.vue

@@ -14,7 +14,7 @@
 			:slidesPerView="3"
 			:centeredSlides="false"
 			:initial-slide="0"
-			:spaceBetween="IsMobile ? 35 : 0"
+			:spaceBetween="0"
 			@swiper="onSwiper"
 		>
 			<swiper-slide class="blood-chart-element" v-for="coin in token" :key="coin.name">
@@ -73,7 +73,7 @@
 				</div>
 				<div class="blood-chart-element-footer">
 					<div class="blood-chart-amount">
-						{{ formatNumber(coin.amountInBLD / 10n ** tokenStore.memeToken.decimals) }}
+						{{ formatBigIntDivision(coin.amountInBLD, 10n ** tokenStore.memeToken.decimals) }}
 					</div>
 					<div>$BLOOD</div>
 				</div>
@@ -96,7 +96,7 @@
 
 <script setup>
 import { computed, ref, inject, onMounted } from "vue";
-import { getPercentage, formatNumber } from "@/helper/helper.js";
+import { getPercentage, formatBigIntDivision } from "@/helper/helper.js";
 import { useCycleStore } from "@/stores/cycles";
 
 import { useMemeburnerStore } from "@/stores/memeburner";
@@ -112,6 +112,8 @@ import "swiper/css/pagination";
 const cycleStore = useCycleStore();
 const tokenStore = useTokenStore();
 
+const isMobile = inject("isMobile");
+
 const props = defineProps({
 	data: Object,
 });
@@ -126,7 +128,9 @@ function onSwiper(swiper) {
 	swiperInstance.value = swiper;
 }
 
-const token = computed(() => props.data?.token);
+const token = computed(() => {
+	return props.data?.token.sort((a, b) => (a.amount > b.amount ? -1 : b.amount > a.amount ? 1 : 0));
+});
 
 //start with visual 8% of the filled bar, because otherwise the percentage number is not visible
 function getPercentageBloodChart(amount, goal) {
@@ -185,6 +189,9 @@ function getPercentageBloodChart(amount, goal) {
                     &.logo
                         height: 100%
                         width: 100%
+                        border: 1px solid yellow
+                        border-radius: 50%
+
                 img
                     &.crown
                         position: absolute

src/components/ClaimComponent.vue

@@ -4,7 +4,7 @@
 		<template v-slot:body>
 			<token-name-price
 				:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
-				:price="formatNumber(walletStore.unclaimedRewards)"
+				:price="formatBigIntDivision(walletStore.unclaimedRewards, 10n ** tokenStore.memeToken.decimals)"
 			></token-name-price>
 			<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline logo'"></token-logo>
 		</template>
@@ -26,7 +26,9 @@
 					<stake-menu
 						v-model="tokenNumber"
 						@close="stakeMenu = false"
-						:amount="walletStore.unclaimedRewards"
+						:amount="
+							formatBigIntDivision(walletStore.unclaimedRewards, 10n ** tokenStore.memeToken.decimals)
+						"
 						:stake="stake"
 						v-if="stakeMenu"
 					>
@@ -57,14 +59,16 @@
 						<template v-slot:message-end>
 							<div class="input-balance">
 								Balance:
-								{{ formatNumber(walletStore.unclaimedRewards) }}
+								{{
+									formatBigIntDivision(
+										walletStore.unclaimedRewards,
+										10n ** tokenStore.memeToken.decimals
+									)
+								}}
 							</div>
 						</template>
 					</stake-menu>
 				</Transition>
-				<div class="connected-stake-first-round small-text text-center">
-					You can claim, once the cycle is over.
-				</div>
 			</template>
 			<template v-else-if="cycleStore.rewardsSacrificeCurrentCycle > 0n">
 				<div class="connected-stake-buttons">
@@ -99,7 +103,7 @@ import { useTokenStore } from "@/stores/tokens";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useRouter } from "vue-router";
 import { useToast } from "vue-toastification";
-import { formatNumber } from "@/helper/helper.js";
+import { formatBigIntDivision } from "@/helper/helper.js";
 import { showSuccessToast } from "@/helper/toast.js";
 
 const toast = useToast();
@@ -138,10 +142,8 @@ function openStake() {
 
 async function stakeAndClaimAllCycles() {
 	try {
-		const unclaimedRewards = walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
 		stateClaim.value = 2;
-		console.log("unclaimedRewards", unclaimedRewards);
+		const coefficient = BigInt(10000 * tokenNumber.value) / walletStore.unclaimedRewards;
-		const coefficient = BigInt(10000 * tokenNumber.value) / unclaimedRewards;
 		var hash = await rewardLockerStore.stakeAndClaimAllCycles(coefficient);
 		stateClaim.value = 3;
 		const data = await waitForTransaction({
@@ -156,9 +158,9 @@ async function stakeAndClaimAllCycles() {
 		//
 		console.log("rewardData", rewardData);
 		//ClaimedReward (address staker, uint256 reward)
-		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatBigIntDivision(BigInt(rewardData.topics[2]), 10n ** tokenStore.memeToken.decimals);
 		showSuccessToast(
-			formatNumber(outputClaim),
+			outputClaim,
 			"Success!",
 			"You just claimed and staked",
 			"Join the next cycle to increase your rewards and win with your clan"
@@ -187,9 +189,9 @@ async function claimAll() {
 		//
 		console.log("rewardData", rewardData);
 		//ClaimedReward (address staker, uint256 reward)
-		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatBigIntDivision(BigInt(rewardData.topics[2]), 10n ** tokenStore.memeToken.decimals);
 		showSuccessToast(
-			formatNumber(outputClaim),
+			outputClaim,
 			"Success!",
 			"You just claimed",
 			"Join the next cycle to increase your rewards and win with your clan."
@@ -219,7 +221,7 @@ const stateClaimComp = computed(() => {
 		tokenNumber.value === null ||
 		tokenNumber.value === "" ||
 		tokenNumber.value === 0 ||
-		tokenNumber.value > walletStore.memeToken?.unclaimedRewards
+		BigInt(tokenNumber.value) > walletStore.unclaimedRewards / 10n ** tokenStore.memeToken.decimals
 	) {
 		returnState = 0;
 	} else if (stateClaim.value === 2) {

src/components/ConnectWallet.vue

@@ -51,7 +51,12 @@
 				<div class="connected-token" v-for="token in walletStore.token">
 					<token-name-price
 						:name="tokenStore.getToken(token.contractAddress).name"
-						:price="token.balanceOf / 10n ** tokenStore.getToken(token.contractAddress).decimals"
+						:price="
+							formatBigIntDivision(
+								token.balanceOf,
+								10n ** tokenStore.getToken(token.contractAddress).decimals
+							)
+						"
 					></token-name-price>
 					<div class="connected-token-button">
 						<div class="bloodline-badge grey" @click="badgeClick(token)">
@@ -80,7 +85,7 @@ import TokenNamePrice from "./TokenNamePrice.vue";
 import TokenLogo from "./TokenLogo.vue";
 import StakeComponentV1 from "@/components/StakeComponentV1.vue";
 
-import { getAddressShortName, getblocky } from "@/helper/helper.js";
+import { getAddressShortName, getblocky, formatBigIntDivision } from "@/helper/helper.js";
 import { useRoute, useRouter } from "vue-router";
 
 import { disconnect } from "@wagmi/core";

src/components/SacrificeToken.vue

@@ -56,7 +56,7 @@
 							<template v-else> -{{ steps.name }} </template>
 						</div>
 					</template>
-					<template v-slot:message-end v-if="activeWalletToken?.balanceOf">
+					<template v-slot:message-end v-if="activeWalletToken?.balanceOf >= 0">
 						<div class="input-balance tiny-text">
 							Balance:
 							{{ BigInt(activeWalletToken?.balanceOf) / 10n ** activeToken.decimals }}
@@ -77,7 +77,7 @@
 				}"
 			>
 				<div class="sacrifice-to-body">
-					<token-name-price name="$BLOOD" :price="`≈${formatNumber(output)}`"></token-name-price>
+					<token-name-price name="$BLOOD" :price="`≈${output}`"></token-name-price>
 					<token-logo :img="activeToken.vamp.logo" :size="64" :alt="activeToken.vamp.name"></token-logo>
 				</div>
 
@@ -181,7 +181,7 @@ const cycleStore = useCycleStore();
 const sacrificeStore = useSacrificeStore();
 const toast = useToast();
 
-import { debounce, formatNumber } from "@/helper/helper.js";
+import { debounce } from "@/helper/helper.js";
 
 const isMobile = inject("isMobile");
 const showPanel = inject("showPanel");
@@ -243,6 +243,7 @@ const stateComputed = computed(() => {
 });
 const processChange = debounce(async (value) => {
 	const rewardValue = await sacrificeStore.getRewardsFor(value, activeToken.value);
+	console.log("rewardValue", rewardValue);
 	output.value = rewardValue.output;
 	stakingOutput.value = rewardValue.staking;
 });
@@ -278,6 +279,7 @@ async function approveToken(amount) {
 		console.log("data", data);
 		activeToken.value.allowance = await tokenStore.allowance();
 		sacrificeStore.sacrificeState = 1;
+		showApprovedToast();
 	} catch (error) {
 		console.error(error);
 		throw new Error(error);
@@ -321,10 +323,8 @@ function showApprovedToast(value, header, subheader, info) {
 			subheader: subheader,
 			info: info,
 		},
-		// Listen and react to events using callbacks. In this case we listen for
-		// the "click" event emitted when clicking the toast button
 		listeners: {
-			sacrificed: showSplash,
+			// sacrificed: showSplash,
 		},
 	};
 
@@ -332,10 +332,10 @@ function showApprovedToast(value, header, subheader, info) {
 	return toast(content, {
 		position: "top-right",
 		icon: false,
+		timeout: 5000,
 		closeOnClick: false,
 		// toastClassName: "modal-overlay",
 		hideProgressBar: true,
-		timeout: false,
 		toastClassName: "approve-toast toast-card",
 	});
 }

src/components/StakeComponentV1.vue

@@ -30,7 +30,10 @@
 			</div>
 			<div class="connected-stake-body">
 				<slot name="body">
-					<token-name-price name="$BLOOD staked" :price="formatNumber(walletStore.staked)"></token-name-price>
+					<token-name-price
+						name="$BLOOD staked"
+						:price="formatBigIntDivision(walletStore.staked, 10n ** tokenStore.memeToken.decimals)"
+					></token-name-price>
 					<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline-token'"></token-logo>
 					<token-name-price :variant="true" class="stake-reward" name="Bonus" price="+25%"></token-name-price>
 				</slot>
@@ -106,7 +109,7 @@
 							</div>
 						</template>
 						<template v-slot:message-end>
-							<div class="input-balance">Balance: {{ formatNumber(balanceOf) }}</div>
+							<div class="input-balance">Balance: {{ balanceOf }}</div>
 						</template>
 					</stake-menu>
 					<div class="unstake-menu" v-else-if="stakeMenu & unstakeMenu">
@@ -140,7 +143,11 @@
 					class="connected-stake-first-round small-text text-center"
 					v-if="walletStore.orderedUnstakedAmount > 0n && !ableToUnstake"
 				>
-					You can claim {{ formatNumber(walletStore.orderedUnstakedAmount) }} $BLOOD next cycle.
+					You can claim
+					{{
+						formatBigIntDivision(walletStore.orderedUnstakedAmount, 10n ** tokenStore.memeToken.decimals)
+					}}
+					$BLOOD next cycle.
 				</div>
 			</slot>
 			<slot></slot>
@@ -162,7 +169,7 @@ import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
 import { useToast } from "vue-toastification";
-import { formatNumber } from "@/helper/helper.js";
+import { formatBigIntDivision } from "@/helper/helper.js";
 
 const toast = useToast();
 const walletStore = useWalletStoreV2();
@@ -231,8 +238,8 @@ async function unstake() {
 		});
 		console.log("rewardData", rewardData);
 
-		const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatBigIntDivision(BigInt(rewardData.topics[3]), 10n ** tokenStore.memeToken.decimals);
-		showSuccessToast(formatNumber(outputClaim), "Success!", "You just unstaked");
+		showSuccessToast(outputClaim, "Success!", "You just unstaked");
 		await walletStore.loadWalletData();
 	} catch (error) {
 		console.error("unstake", error);
@@ -257,13 +264,8 @@ async function orderUnstake() {
 		});
 		console.log("rewardData", rewardData);
 
-		const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatBigIntDivision(BigInt(rewardData.topics[3]), 10n ** tokenStore.memeToken.decimals);
-		showSuccessToast(
+		showSuccessToast(outputClaim, "Success!", "You just unstaked", "You can claim your stake next cycle.");
-			formatNumber(outputClaim),
-			"Success!",
-			"You just unstaked",
-			"You can claim your stake next cycle."
-		);
 		stakeMenu.value = false;
 	} catch (error) {
 		console.error("orderUnstake", error);
@@ -290,11 +292,11 @@ async function stakeToken() {
 		//
 		console.log("rewardData", rewardData);
 
-		const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatBigIntDivision(BigInt(rewardData.topics[3]), 10n ** tokenStore.memeToken.decimals);
 		console.log("data", data);
 		state.value = 0;
 		showSuccessToast(
-			formatNumber(outputClaim),
+			outputClaim,
 			"Success!",
 			"You just staked",
 			"Your next sacrifice will get an extra staking bonus as a reward."
@@ -322,7 +324,7 @@ const balanceOf = computed(() => {
 	if (!walletStore.memeToken?.balanceOf) {
 		return 0n;
 	} else {
-		return walletStore.memeToken?.balanceOf / 10n ** tokenStore.memeToken.decimals;
+		return formatBigIntDivision(walletStore.memeToken?.balanceOf, 10n ** tokenStore.memeToken.decimals);
 	}
 });
 

src/components/StakeMenu.vue

@@ -54,10 +54,12 @@ const emit = defineEmits(["close", "update:modelValue"]);
 async function addTokensPercent(value) {
 	console.log("value", value);
 	console.log("props.amount", props.amount);
+	console.log("props.amount * 100)", props.amount * 1000);
 	let amount;
 	if (props.amount !== undefined || props.amount !== null) {
 		console.log("props.amount", props.amount);
-		amount = (props.amount * value) / 100n;
+		console.log("value", value);
+		amount = (BigInt(props.amount * 1000) * value) / 100000n;
 	} else if (props.stake) {
 		amount = (walletStore.memeToken.balanceOf * value) / 100n;
 	} else {

src/components/TokenClaim.vue

@@ -23,20 +23,24 @@
 			<rewards-wrapper
 				title="Sacrafice Reward"
 				coin="$BLOOD"
-				:amount="formatNumber(rewardsSacrifice)"
+				:amount="formatBigIntDivision(rewardsSacrifice, 10n ** tokenStore.memeToken.decimals)"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
 				title="Staking Bonus"
 				coin="$BLOOD"
-				:amount="formatNumber(rewardsStaking)"
+				:amount="formatBigIntDivision(rewardsStaking, 10n ** tokenStore.memeToken.decimals)"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
 				title="Clan Bonus"
 				coin="$BLOOD"
-				:amount="formatNumber(rewardsClan)"
+				:amount="formatBigIntDivision(rewardsClan, 10n ** tokenStore.memeToken.decimals)"
-				image="/assets/img/vampir.png"
+				:image="
+					activeCycle === currentCycle || !cycleStore.getCurrentCycleData?.winner.vamplogo
+						? '/assets/img/token/notoken.png'
+						: cycleStore.getCurrentCycleData?.winner.vamplogo
+				"
 			/>
 		</div>
 		<div class="rewards-total-wrapper">
@@ -45,7 +49,10 @@
 				class="rewards-total-inner bloodline-border bloodline-border--variant1"
 				:class="{ purple: rewardsTotal > 0 && activeCycle !== currentCycle }"
 			>
-				<token-name-price name="$BLOOD" :price="formatNumber(rewardsTotal)"></token-name-price>
+				<token-name-price
+					name="$BLOOD"
+					:price="formatBigIntDivision(rewardsTotal, 10n ** tokenStore.memeToken.decimals)"
+				></token-name-price>
 				<token-logo img="/assets/img/vampir.png" :alt="'vampire'"></token-logo>
 			</div>
 		</div>
@@ -70,12 +77,16 @@
 			<template v-else-if="rewardsTotal > 0">
 				<Transition name="smooth">
 					<div class="stake-buttons" v-show="!stakeMenu">
-						<div class="btn btn-immortal" v-if="stateClaimedComp === 0" @click="claimRewards">Claim</div>
+						<div class="btn btn-immortal sub-header" v-if="stateClaimedComp === 0" @click="claimRewards">
-						<div class="btn btn-immortal" disabled v-if="stateClaimedComp === 2">Sign Transaction</div>
+							Claim
-						<div class="btn btn-immortal" disabled v-if="stateClaimedComp === 3">
+						</div>
+						<div class="btn btn-immortal sub-header" disabled v-if="stateClaimedComp === 2">
+							Sign Transaction
+						</div>
+						<div class="btn btn-immortal sub-header" disabled v-if="stateClaimedComp === 3">
 							<loading-component></loading-component>
 						</div>
-						<div class="btn btn-immortal" @click="openStake">Stake</div>
+						<div class="btn btn-immortal sub-header" @click="openStake">Stake</div>
 					</div>
 				</Transition>
 				<Transition name="smooth">
@@ -87,20 +98,32 @@
 						v-if="stakeMenu"
 					>
 						<template v-slot:body>
-							<div class="btn btn-immortal stake-button" disabled v-if="stateStakeClaimComp === 0">
+							<div
+								class="btn btn-immortal sub-header stake-button"
+								disabled
+								v-if="stateStakeClaimComp === 0"
+							>
 								Enter Amount
 							</div>
 							<div
-								class="btn btn-immortal stake-button"
+								class="btn btn-immortal sub-header stake-button"
 								v-else-if="stateStakeClaimComp === 1"
 								@click="stakeAndClaim"
 							>
 								Stake & Claim Rest
 							</div>
-							<div class="btn btn-immortal stake-button" disabled v-if="stateStakeClaimComp === 2">
+							<div
+								class="btn btn-immortal sub-header stake-button"
+								disabled
+								v-if="stateStakeClaimComp === 2"
+							>
 								Sign Transaction
 							</div>
-							<div class="btn btn-immortal stake-button" disabled v-if="stateStakeClaimComp === 3">
+							<div
+								class="btn btn-immortal sub-header stake-button"
+								disabled
+								v-if="stateStakeClaimComp === 3"
+							>
 								<loading-component></loading-component>
 							</div>
 							<div
@@ -134,7 +157,7 @@ import { waitForTransaction } from "@wagmi/core";
 import LoadingComponent from "@/components/LoadingComponent.vue";
 import TokenNamePrice from "@/components/TokenNamePrice.vue";
 import TokenLogo from "@/components/TokenLogo.vue";
-import { formatNumber } from "@/helper/helper.js";
+import { formatBigIntDivision } from "@/helper/helper.js";
 import { showSuccessToast } from "@/helper/toast.js";
 
 const showPanel = inject("showPanel");
@@ -186,10 +209,10 @@ async function stakeAndClaim() {
 		//
 		console.log("rewardData", rewardData);
 		console.log("stakeData", stakeData);
-		const outputClaim = BigInt(rewardData?.topics[2]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = BigInt(rewardData?.topics[2]);
-		const outputStaked = BigInt(stakeData?.topics[3]) / 10n ** tokenStore.memeToken.decimals;
+		const outputStaked = BigInt(stakeData?.topics[3]);
 		showSuccessToast(
-			formatNumber(outputClaim + outputStaked),
+			formatBigIntDivision(outputClaim + outputStaked, 10n ** tokenStore.memeToken.decimals),
 			"Success!",
 			"You just claimed and staked",
 			"Join the next cycle to increase your rewards and win with your clan."
@@ -237,9 +260,9 @@ async function claimRewards() {
 		//
 		console.log("rewardData", rewardData);
 
-		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatBigIntDivision(BigInt(rewardData.topics[2]), 10n ** tokenStore.memeToken.decimals);
 		showSuccessToast(
-			formatNumber(outputClaim),
+			outputClaim,
 			"Success!",
 			"You just claimed",
 			"Join the next cycle to increase your rewards and win with your clan."
@@ -276,7 +299,7 @@ const stateStakeClaimComp = computed(() => {
 		tokenNumber.value === null ||
 		tokenNumber.value === "" ||
 		tokenNumber.value === 0 ||
-		tokenNumber.value > walletStore.unclaimedRewards
+		BigInt(tokenNumber.value) > walletStore.unclaimedRewards / 10n ** tokenStore.memeToken.decimals
 	) {
 		returnState = 0;
 	}

src/components/TokenInput.vue

@@ -26,7 +26,7 @@ import TokenLogo from "@/components/TokenLogo.vue";
 const props = defineProps({
 	modelValue: [String, Number],
 	logo: String,
-	max: Number,
+	max: [BigInt, Number],
 });
 
 const emit = defineEmits(["update:modelValue"]);

src/components/TokenNamePrice.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="token-price-wrapper">
-		<div class="token-name mid-text">{{ props.name }}</div>
+		<div class="token-name tiny-text">{{ props.name }}</div>
 		<div class="token-price" :class="{ 'sub-header-2': !props.variant, 'sub-header': props.variant }">
 			{{ props.price }}
 		</div>

src/components/toasts/ApprovedToast.vue

@@ -1,18 +1,6 @@
 <template>
 	<div class="approve-card">
-		<div class="left-side low-mid-text">
+		<div class="left-side low-mid-text">Transaction Successful</div>
-			Transaction<br />
-			Successful
-		</div>
-		<div class="right-side">
-			<div class="btn btn-immortal tiny-text" v-if="stateComputed === 1" @click="sacrificeClick">
-				Sacrifice 🩸
-			</div>
-			<div class="btn btn-immortal tiny-text" disabled v-if="stateComputed === 2">Sign Transaction</div>
-			<div class="btn btn-immortal tiny-text" disabled v-if="stateComputed === 3">
-				<loading-component></loading-component>
-			</div>
-		</div>
 	</div>
 </template>
 <script setup>
@@ -44,41 +32,6 @@ const splashBlood = inject("splashBlood");
 function closeToast() {
 	toast.dismiss(id);
 }
-
-const stateComputed = computed(() => {
-	let returnState = 0;
-	if (
-		sacrificeStore.sacrificeNumber === null ||
-		sacrificeStore.sacrificeNumber === "" ||
-		sacrificeStore.sacrificeNumber === 0
-	) {
-		returnState = 0;
-	} else if (sacrificeStore.sacrificeState === 2) {
-		returnState = 2;
-	} else if (sacrificeStore.sacrificeState === 3) {
-		returnState = 3;
-	} else if (
-		sacrificeStore.sacrificeNumber !== null ||
-		sacrificeStore.sacrificeNumber !== "" ||
-		sacrificeStore.sacrificeNumber > 0
-	) {
-		returnState = 1;
-	}
-	return returnState;
-});
-
-async function sacrificeClick() {
-	try {
-		var result = await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, tokenStore.activeToken);
-		if (result) {
-			emit("sacrificed");
-		}
-	} catch (error) {
-		console.error("error", error);
-	} finally {
-		closeToast();
-	}
-}
 </script>
 <style lang="sass">
 .Vue-Toastification__container

src/helper/helper.js

@@ -5,9 +5,15 @@ export function getPercentage(amount, goal) {
 
 // input type bigint
 export function formatBigIntDivision(nominator, denominator) {
-    const integer = (nominator / denominator).toString();
+    console.log("nominator", nominator);
+    console.log("denominator", denominator);
+    if (!nominator) {
+        return 0n
+    }
+    let integer = Number(nominator / denominator)
+    integer = formatNumber(integer).toString();
     // pick how much digits after point to show
-    const fraction = (nominator % denominator).toString().substring(0,10);
+    const fraction = (nominator % denominator).toString().substring(0,2);
     // output type string
     return integer + '.' + fraction;
 }

src/main.js

@@ -236,7 +236,9 @@ try {
 	});
 
     watchNetwork((network) => {
-        
+        if (!network.chain?.network) {
+            return;
+        }
         const chainAllowed = network.chains?.find((obj) => {
             return obj.network === network.chain.network;
         });

src/stores/cycles.js

@@ -35,35 +35,37 @@ export const useCycleStore = defineStore("cycles", {
 			if (!this.cycles[this.activeCycle]?.rewards_sacrifice) {
 				return 0n;
 			}
-			return this.cycles[this.activeCycle]?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals;
+			return this.cycles[this.activeCycle]?.rewards_sacrifice
 		},
 		rewardsSacrificeCurrentCycle() {
 			const tokenStore = useTokenStore();
 			if (!this.cycles[this.currentCycle]?.rewards_sacrifice) {
 				return 0n;
 			}
-			return this.cycles[this.currentCycle]?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals;
+			return this.cycles[this.currentCycle]?.rewards_sacrifice
 		},
 		rewardsStaking() {
 			const tokenStore = useTokenStore();
 			if (!this.cycles[this.activeCycle]?.rewards_staking) {
 				return 0n;
 			}
-			return this.cycles[this.activeCycle]?.rewards_staking / 10n ** tokenStore.memeToken.decimals;
+			return  this.cycles[this.activeCycle]?.rewards_staking
+				
 		},
 		rewardsClan() {
 			const tokenStore = useTokenStore();
 			if (!this.cycles[this.activeCycle]?.rewards_clan) {
 				return 0n;
 			}
-			return this.cycles[this.activeCycle]?.rewards_clan / 10n ** tokenStore.memeToken.decimals;
+			return this.cycles[this.activeCycle]?.rewards_clan, 10n ** tokenStore.memeToken.decimals
 		},
 		rewardsTotal() {
 			const tokenStore = useTokenStore();
 			if (!this.cycles[this.activeCycle]?.rewards_total) {
 				return 0n;
 			}
-			return this.cycles[this.activeCycle]?.rewards_total / 10n ** tokenStore.memeToken.decimals;
+			return this.cycles[this.activeCycle]?.rewards_total
+			
 		},
 	},
 	actions: {

src/stores/sacrifice.js

@@ -9,7 +9,7 @@ import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useTokenStore } from "@/stores/tokens";
 import { waitForTransaction, readContract, watchBlockNumber, multicall } from "@wagmi/core";
 import { showSuccessToast } from "@/helper/toast.js";
-import { formatNumber } from "@/helper/helper.js";
+import { formatBigIntDivision } from "@/helper/helper.js";
 
 export const useSacrificeStore = defineStore("sacrifice", {
 	state: () => ({
@@ -64,15 +64,16 @@ export const useSacrificeStore = defineStore("sacrifice", {
 				});
                 console.log("rewardData", rewardData);
                 //output
-				const outputSacrifice = rewardData.reduce((x, y) => {
+				let outputSacrifice = rewardData.reduce((x, y) => {
-					return x + BigInt(y.data) / 10n ** token.decimals;
+					return x + BigInt(y.data);
 				}, 0n);
+				outputSacrifice = formatBigIntDivision(outputSacrifice, 10n ** token.decimals);
                 console.log("outputSacrifice", outputSacrifice);
 				token.allowance = await tokenStore.allowance();
                 this.sacrificeState = 4;
 
 				showSuccessToast(
-					formatNumber(outputSacrifice),
+					outputSacrifice,
 					"Success!",
 					"You turned your meme into:",
 					"You can claim once the current cycle is finished and your clan bonus was calculated."
@@ -94,7 +95,7 @@ export const useSacrificeStore = defineStore("sacrifice", {
 			const uniswapStore = useUniswapStore();
             const walletStore = useWalletStoreV2();
             const rewardLockerStore = useRewardLockerStore();
-			let output = 0;
+			let output = 0n;
 
 			let minBLOOD;
 
@@ -102,7 +103,9 @@ export const useSacrificeStore = defineStore("sacrifice", {
                 
 				if (!amount) {
 					this.sacrificeState = 0;
-					return output;
+                    	return {
+							output: 0n,
+						};
 				}
                 const amountETHBase = await memeburnerStore.getAmountETHBase(amount);
 				// take 99.5% of amount ETH got for selling meme, 0.5% allowed slippage
@@ -198,7 +201,14 @@ export const useSacrificeStore = defineStore("sacrifice", {
 					stakingRewardsNumber = stakingReward / 10n ** token.decimals
                 }
                 const outputNumber = output / 10n ** BigInt(token.decimals);
-				return { output: outputNumber, variant: variant, minETH: minETH, minBLOOD: minBLOOD, staking: stakingRewardsNumber };
+				return {
+					output: outputNumber,
+					variant: variant,
+					minETH: minETH,
+					minBLOOD: minBLOOD,
+					staking: stakingRewardsNumber,
+				};
+
 			} catch (error) {
                 console.error("getRewardsFor", error);
 			}

src/stores/walletV2.js

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { markRaw } from "vue";
 import { useTokenStore } from "./tokens";
 import { useRewardLockerStore } from "./rewardlocker";
-
+import {formatBigIntDivision } from "@/helper/helper.js"
 import {
 	createConfig,
 	configureChains,
@@ -54,25 +54,22 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				return obj.contractAddress === tokenStore.memeToken.contractAddress;
 			}),
 		unclaimedRewards() {
-			const tokenStore = useTokenStore();
 			if (!this.memeToken?.unclaimedRewards) {
 				return 0n;
 			}
-			return this.memeToken.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
+			return this.memeToken.unclaimedRewards;
 		},
         orderedUnstakedAmount() {
-			const tokenStore = useTokenStore();
             if (!this.memeToken?.orderedUnstakedAmount) {
                 return 0n
             }
-            return this.memeToken?.orderedUnstakedAmount / 10n ** tokenStore.memeToken.decimals;
+            return this.memeToken?.orderedUnstakedAmount;
         },
         staked() {
-           const tokenStore = useTokenStore();
 			if (!this.memeToken?.staked) {
 				return 0n;
 			}
-			return this.memeToken?.staked / 10n ** tokenStore.memeToken.decimals; 
+			return this.memeToken?.staked; 
         }
 	},
 	actions: {

vite.config.js

@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
+import svgLoader from "vite-svg-loader";
 
 import { defineConfig } from 'vite'
 import GlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
@@ -9,7 +10,7 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
 	base: "./",
-	plugins: [vue()],
+	plugins: [vue(), svgLoader()],
 	optimizeDeps: {
 		esbuildOptions: {
 			plugins: [