merged pull request

src/App.vue

@@ -13,11 +13,12 @@ import { useCycleStore } from "@/stores/cycles";
 
 import SlideoutPanel from "./components/SlideoutPanel.vue";
 import ConnectWallet from "./components/ConnectWallet.vue";
-
+import BloodSplash from "./components/BloodSplash.vue";
 import { getNetwork, fetchTransaction } from "@wagmi/core";
 
 const isMobile = ref(false);
 const showPanel = ref(false);
+const splashBlood = ref(0);
 
 const router = useRouter();
 const route = useRoute();
@@ -32,8 +33,14 @@ watch(showPanel, (newValue, oldValue) => {
 	console.log("document.body", document.body);
 	if (newValue) {
 		document.body.classList.add("sideoutpanel-open");
+		if (isMobile) {
+			document.body.classList.add("mobile");
+		}
 	} else {
 		document.body.classList.remove("sideoutpanel-open");
+		if (isMobile) {
+			document.body.classList.remove("mobile");
+		}
 	}
 });
 
@@ -58,6 +65,7 @@ function changeRoute(name) {
 }
 provide("isMobile", isMobile);
 provide("showPanel", showPanel);
+provide("splashBlood", splashBlood);
 
 onMounted(async () => {
 	window.addEventListener("resize", handleWindowSizeChange);
@@ -76,6 +84,7 @@ onMounted(async () => {
 		cycleStore.activeCycle = cycleStore.currentCycle;
 	}
 
+	console.log("cycleStore.activeCycle", cycleStore.activeCycle);
 	await cycleStore.fillCycle(cycleStore.activeCycle);
 });
 </script>
@@ -88,9 +97,12 @@ onMounted(async () => {
 	<div class="main" :class="{ 'no-scroll': showPanel, mobile: isMobile }">
 		<RouterView />
 	</div>
+	<blood-splash :key="splashBlood"></blood-splash>
+
 	<div class="footer">
 		<div class="footer-inner">
 			<div class="footer-headline">Join Bloodline</div>
+
 			<div class="footer-social-links">
 				<div class="social-bloodline-badge">
 					<div class="social-bloodline-badge-icon">
@@ -139,7 +151,7 @@ onMounted(async () => {
         font-size: 24px
         display: flex
         flex-direction: column
-        gap: 8px
+        gap: 16px
         align-items: center
         @media (min-width: 992px)
             justify-content: center
@@ -152,7 +164,7 @@ onMounted(async () => {
                 border-radius: 14px
                 background: var(--grey, #858585)
                 display: flex
-                padding: 0px 16px
+                padding: 6px 20px
                 align-items: center
                 flex: 0 1 0
                 color: black

src/components/BloodChart.vue

@@ -72,7 +72,7 @@
 				</div>
 				<div class="blood-chart-element-footer">
 					<div class="blood-chart-amount">
-						{{ formatNumber(coin.amountInBLD) }}
+						{{ formatNumber(coin.amountInBLD / 10n ** tokenStore.memeToken.decimals) }}
 					</div>
 					<div>$BLOOD</div>
 				</div>
@@ -99,6 +99,8 @@ import { getPercentage, compactNumber, formatNumber } from "@/helper/helper.js";
 import { useCycleStore } from "@/stores/cycles";
 
 import { useMemeburnerStore } from "@/stores/memeburner";
+import { useTokenStore } from "@/stores/tokens";
+
 import { Swiper, SwiperSlide } from "swiper/vue";
 
 // Import Swiper styles
@@ -107,6 +109,7 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 
 const cycleStore = useCycleStore();
+const tokenStore = useTokenStore();
 
 const props = defineProps({
 	data: Object,
@@ -213,10 +216,6 @@ function getPercentageBloodChart(amount, goal) {
 .swiper-slide
     width: 80px
 
-.swiper-test
-    display: flex
-    flex-direction: column
-
 
 .blood-arrow
     min-width: 30px

src/components/ClaimComponent.vue

@@ -4,7 +4,7 @@
 		<template v-slot:body>
 			<token-name-price
 				:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
-				:price="walletStore.memeToken?.unclaimedRewards"
+				:price="walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals"
 			></token-name-price>
 			<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline logo'"></token-logo>
 		</template>
@@ -28,7 +28,7 @@
 						@close="stakeMenu = false"
 						:amount="walletStore.memeToken?.unclaimedRewards"
 						:stake="stake"
-						v-if="stakeMenu"
+						v-if="stakeMenu && walletStore.memeToken?.unclaimedRewards"
 					>
 						<template v-slot:body>
 							<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 0">
@@ -55,8 +55,13 @@
 							</div>
 						</template>
 						<template v-slot:message-end>
-							<div class="input-balance">
+							<div class="input-balance" v-if="walletStore.memeToken?.unclaimedRewards">
-								Balance: {{ formatNumber(walletStore.memeToken?.unclaimedRewards) }}
+								Balance:
+								{{
+									formatNumber(
+										walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals
+									)
+								}}
 							</div>
 						</template>
 					</stake-menu>
@@ -127,9 +132,10 @@ function openStake() {
 
 async function stakeAndClaimAllCycles() {
 	try {
-		const unclaimedRewards = walletStore.memeToken?.unclaimedRewards;
+		const unclaimedRewards = walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
 		stateClaim.value = 2;
-		const coefficient = (10000 * tokenNumber.value) / unclaimedRewards;
+		console.log("unclaimedRewards", unclaimedRewards);
+		const coefficient = BigInt(10000 * tokenNumber.value) / unclaimedRewards;
 		var hash = await rewardLockerStore.stakeAndClaimAllCycles(coefficient);
 		stateClaim.value = 3;
 		const data = await waitForTransaction({
@@ -144,7 +150,7 @@ async function stakeAndClaimAllCycles() {
 		//
 		console.log("rewardData", rewardData);
 		//ClaimedReward (address staker, uint256 reward)
-		const outputClaim = Number(rewardData.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
+		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
 		showSuccessToast(
 			formatNumber(outputClaim),
 			"Success!",
@@ -175,7 +181,7 @@ async function claimAll() {
 		//
 		console.log("rewardData", rewardData);
 		//ClaimedReward (address staker, uint256 reward)
-		const outputClaim = Number(rewardData.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
+		const outputClaim = rewardData.topics[2] / 10n ** tokenStore.memeToken.decimals;
 		showSuccessToast(
 			formatNumber(outputClaim),
 			"Success!",

src/components/ConnectWallet.vue

@@ -5,15 +5,24 @@
 			<div class="connectors-wrapper">
 				<div
 					class="connectors-element card"
+					:class="[[connector.id]]"
 					v-for="connector in walletStore.config?.connectors"
 					@click="connectWallet(connector)"
 				>
 					<div class="connector-icon">
+						<template v-if="connector.id === 'injected'">
+							<font-awesome-icon :icon="['fas', 'wallet']" />
+						</template>
+						<template v-else>
 							<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
+						</template>
 					</div>
 					<div class="connector-name">
 						<template
-							v-if="connector.id !== 'metaMask' || (connector.id === 'metaMask' && isMetaMaskInstalled())"
+							v-if="
+								connector.id !== 'metaMask' ||
+								(connector.id === 'metaMask' && isMetaMaskInstalled(connector))
+							"
 						>
 							{{ connector.name }}
 						</template>
@@ -42,7 +51,7 @@
 				<div class="connected-token" v-for="token in walletStore.token">
 					<token-name-price
 						:name="tokenStore.getToken(token.contractAddress).name"
-						:price="token.balanceOf"
+						:price="token.balanceOf / 10n ** tokenStore.getToken(token.contractAddress).decimals"
 					></token-name-price>
 					<div class="connected-token-button">
 						<div class="bloodline-badge grey" @click="badgeClick(token)">
@@ -95,10 +104,9 @@ async function disconnectWallet() {
 	}
 }
 
-function isMetaMaskInstalled() {
+function isMetaMaskInstalled(connector) {
-	//metamask is not installed but showing true, is that a bug?
+	const metamaskInstalled = connector?.options?.getProvider();
-	if (typeof window.ethereum !== "undefined" && window.ethereum?.isMetaMask && !window.ethereum.isBraveWallet) {
+	if (metamaskInstalled) {
-		console.log("MetaMask is installed!", window.ethereum);
 		return true;
 	}
 	return false;
@@ -109,7 +117,6 @@ function isMetaMaskInstalled() {
 //we could also show buy, if there is no pepe
 function badgeClick(token) {
 	var tokenData = tokenStore.getToken(token.contractAddress);
-	tokenStore.activeToken = tokenData;
 	if (tokenStore.memeToken.contractAddress === token.contractAddress) {
 		//buy
 		window.open(
@@ -124,7 +131,7 @@ function badgeClick(token) {
 
 //special case for metaMask, but I think that is the most used wallet
 async function connectWallet(connector) {
-	if (connector.id === "metaMask" && !isMetaMaskInstalled()) {
+	if (connector.id === "metaMask" && !isMetaMaskInstalled(connector)) {
 		window.open(" https://metamask.io/", "_blank");
 		return;
 	}
@@ -151,6 +158,14 @@ async function connectWallet(connector) {
             &:hover, &:active, &:focus
                 background-color: lighten(#858585, 20%)
                 cursor: pointer
+            &.injected
+                .connector-icon
+                    background-color: white
+                    display: flex
+                    justify-content: center
+                    align-items: center
+                    svg
+                        font-size: 25px
             .connector-icon
                 border-radius: 12px
                 width: 40px

src/components/Navbar.vue

@@ -147,21 +147,6 @@ onBeforeUnmount(() => {
                 color: white
         .navbar-center
             display: flex
-            margin-left: auto
-            .navbar-social-links
-                display: flex
-                gap: 18px
-                .social-bloodline-badge
-                    font-size: 16px
-                    padding: 8px 16px 8px 16px
-                    border-radius: 14px
-                    background-color: #0F0F0F
-                    display: flex
-                    &:hover,&:active,&:focus
-                        background-color: lighten(#0F0F0F, 10%)
-                        cursor: pointer
-                    .social-bloodline-badge-icon
-                        margin-right: 8px
         .navbar-end
             display: flex
             margin-left: auto

src/components/RewardsWrapper.vue

@@ -17,7 +17,7 @@ import TokenLogo from "@/components/TokenLogo.vue";
 const props = defineProps({
 	title: String,
 	info: String,
-	amount: String,
+	amount: [String, Number],
 	image: String,
 });
 </script>

src/components/SacrificeToken.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="sacrifice-wrapper card card--glow bloodline-wrapper">
+	<div class="sacrifice-wrapper card card--glow">
-		<div class="sacrifice-headline">Select Sacrifice</div>
+		<div class="sacrifice-headline">Select Sacrifice {{ splashBlood }}</div>
 		<div class="sacrifice-select-tokens">
 			<div class="sacrifice-tokens">
 				<div
@@ -25,34 +25,41 @@
 			</div>
 		</div>
 		<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
-			<div
+			<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1 purple">
-				:class="{
-					'sacrifice-from-wrapper': true,
-					'bloodline-border': true,
-					'bloodline-border--variant1': true,
-					purple: true,
-				}"
-			>
 				<token-input
-					:modelValue="sacrificeStore.sacrificeNumber"
+					:modelValue="sacrificeStore.sacrificeNumber / 10n ** activeToken.decimals"
 					@input="
 						($event) => {
-							sacrificeStore.sacrificeNumber = $event.target.value;
+							const value = BigInt($event.target.value) * 10n ** 18n;
-							processChange($event.target.value);
+							sacrificeStore.sacrificeNumber = value;
+							processChange(value);
 						}
 					"
 					:max="activeWalletToken?.balanceOf"
 					:logo="activeToken.logo"
 				>
 					<template v-slot:message>
-						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
+						<div
-						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
+							class="sacrifice-adder-step bloodline-badge"
-						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
+							v-for="steps in activeToken.addSteps"
+							:key="steps.name"
+							@click="addTokens(steps.amount)"
+						>
+							<template
+								v-if="
+									!walletStore.connected ||
+									sacrificeStore.sacrificeNumber < activeWalletToken?.balanceOf
+								"
+							>
+								+{{ steps.name }}
+							</template>
+							<template v-else> -{{ steps.name }} </template>
+						</div>
 					</template>
 					<template v-slot:message-end v-if="activeWalletToken?.balanceOf">
 						<div class="input-balance tiny-text">
 							Balance:
-							{{ activeWalletToken?.balanceOf }}
+							{{ BigInt(activeWalletToken?.balanceOf) / 10n ** activeToken.decimals }}
 						</div>
 						<div class="input-max tiny-text" @click="addMaxTokens">Max</div>
 					</template>
@@ -178,6 +185,7 @@ import { debounce, formatNumber } from "@/helper/helper.js";
 
 const isMobile = inject("isMobile");
 const showPanel = inject("showPanel");
+const splashBlood = inject("splashBlood");
 
 const walletStore = useWalletStoreV2();
 
@@ -192,6 +200,8 @@ const output = ref(0);
 const stakingOutput = ref(null);
 const blockEvent = ref(null);
 const approveToast = ref(null);
+const addOperator = ref(true);
+const splashesUsed = ref([]);
 /**
  * state 0 enter amount
  * state 1 rdy to go
@@ -215,7 +225,7 @@ const stateComputed = computed(() => {
 	if (
 		sacrificeStore.sacrificeNumber === null ||
 		sacrificeStore.sacrificeNumber === "" ||
-		sacrificeStore.sacrificeNumber === 0
+		sacrificeStore.sacrificeNumber === 0n
 	) {
 		returnState = 0;
 	} else if (sacrificeStore.sacrificeState === 2) {
@@ -258,6 +268,7 @@ onBeforeUnmount(() => {
 
 async function approveToken(amount) {
 	try {
+		console.log("amount", amount);
 		sacrificeStore.sacrificeState = 2;
 		const hash = await tokenStore.approveToken(amount);
 		sacrificeStore.sacrificeState = 3;
@@ -277,15 +288,25 @@ async function approveToken(amount) {
 }
 
 async function addTokens(value) {
-	sacrificeStore.sacrificeNumber = Number(sacrificeStore.sacrificeNumber) + Number(value);
+	if (!walletStore.connected || sacrificeStore.sacrificeNumber < activeWalletToken.value?.balanceOf) {
+		sacrificeStore.sacrificeNumber = BigInt(sacrificeStore.sacrificeNumber) + value;
+	} else {
+		sacrificeStore.sacrificeNumber = sacrificeStore.sacrificeNumber - value;
+		if (sacrificeStore.sacrificeNumber < 0n) {
+			sacrificeStore.sacrificeNumber = 0n;
+		}
+	}
+
 	const rewardValue = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value);
 	output.value = rewardValue.output;
 	stakingOutput.value = rewardValue.staking;
 }
 
 async function addMaxTokens() {
-	sacrificeStore.sacrificeNumber = activeWalletToken.value.balanceOf;
+	addOperator.value = !addOperator.value;
+	sacrificeStore.sacrificeNumber = activeWalletToken.value?.balanceOf;
 	const rewardValue = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value);
+	console.log("rewardValue", rewardValue);
 	output.value = rewardValue.output;
 	stakingOutput.value = rewardValue.staking;
 }
@@ -303,7 +324,9 @@ function showApprovedToast(value, header, subheader, info) {
 		},
 		// Listen and react to events using callbacks. In this case we listen for
 		// the "click" event emitted when clicking the toast button
-		listeners: {},
+		listeners: {
+			sacrificed: showSplash,
+		},
 	};
 
 	// Render the toast and its contents
@@ -318,9 +341,16 @@ function showApprovedToast(value, header, subheader, info) {
 	});
 }
 
+function showSplash() {
+	splashBlood.value++;
+}
+
 //call function in the store and remove icon,
 async function sacrificeToken() {
-	await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, activeToken.value);
+	var result = await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, activeToken.value);
+	if (result) {
+		showSplash();
+	}
 	toast.dismiss(approveToast.value);
 }
 
@@ -454,7 +484,8 @@ async function changeActiveToken(token) {
             display: flex
             gap: 6px
             .sacrifice-adder-step
-                font-size: 14px
+                font-size: 12px
+                align-items: center
                 background: var(--grey, #858585)
                 color: var(--midnight-black, #0F0F0F)
                 &:hover,
@@ -462,8 +493,8 @@ async function changeActiveToken(token) {
                 &:focus
                     background-color: var(--grey-light)
                     cursor: pointer
-                @media (min-width: 992px)
+                // @media (min-width: 992px)
-                    font-size: 12px
+                //     font-size: 12px
             // .sacrifice-adder-balance
             //     margin-left: auto
             // .sacrifice-adder-max

src/components/StakeComponentV1.vue

@@ -31,8 +31,9 @@
 			<div class="connected-stake-body">
 				<slot name="body">
 					<token-name-price
+						v-if="walletStore.memeToken?.staked"
 						:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
-						:price="formatNumber(walletStore.memeToken?.staked)"
+						:price="formatNumber(walletStore.memeToken?.staked / 10n ** tokenStore.memeToken.decimals)"
 					></token-name-price>
 					<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline-token'"></token-logo>
 					<token-name-price class="stake-reward" name="Extra Reward" price="+25%"></token-name-price>
@@ -103,7 +104,9 @@
 							</div>
 						</template>
 						<template v-slot:message-end>
-							<div class="input-balance">Balance: {{ walletStore.memeToken?.balanceOf }}</div>
+							<div class="input-balance">
+								Balance: {{ walletStore.memeToken?.balanceOf / 10n ** tokenStore.memeToken.decimals }}
+							</div>
 						</template>
 					</stake-menu>
 					<div class="unstake-menu" v-else-if="stakeMenu & unstakeMenu">
@@ -172,6 +175,11 @@ const props = defineProps({
 		required: false,
 		default: null,
 	},
+	dense: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
 });
 
 const stakeMenu = ref(false);
@@ -217,7 +225,7 @@ async function orderUnstake() {
 		});
 		console.log("rewardData", rewardData);
 
-		const outputClaim = Number(rewardData.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
+		const outputClaim = Number(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
 		showSuccessToast(
 			formatNumber(outputClaim),
 			"Success!",
@@ -234,6 +242,7 @@ async function orderUnstake() {
 
 async function stakeToken() {
 	try {
+		console.log("stakeToken");
 		state.value = 2;
 		const hash = await rewardLockerStore.stakeBloodline(tokenNumber.value);
 		state.value = 3;
@@ -248,9 +257,9 @@ async function stakeToken() {
 		//
 		console.log("rewardData", rewardData);
 
-		const outputClaim = Number(rewardData.topics[3]) / Math.pow(10, tokenStore.memeToken.decimals);
+		const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
 		console.log("data", data);
-		state.value = 4;
+		state.value = 0;
 		await walletStore.loadWalletData();
 		showSuccessToast(
 			formatNumber(outputClaim),

src/components/StakeMenu.vue

@@ -2,10 +2,10 @@
 	<div class="stake-menu">
 		<token-input :modelValue="props.modelValue" @input="emit('update:modelValue', Number($event.target.value))">
 			<template v-slot:message>
-				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(25)">25%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(25n)">25%</div>
-				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50)">50%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50n)">50%</div>
-				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75)">75%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75n)">75%</div>
-				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(100)">100%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(100n)">100%</div>
 			</template>
 			<template v-slot:message-end>
 				<slot name="message-end"> </slot>
@@ -47,15 +47,18 @@ const emit = defineEmits(["close", "update:modelValue"]);
 
 async function addTokensPercent(value) {
 	console.log("value", value);
-	console.log(walletStore.memeToken.balanceOf);
+	console.log("props.amount", props.amount);
+	console.log(walletStore.memeToken.balanceOf / 10n ** tokenStore.memeToken.decimals);
 	let amount;
 	if (props.amount !== undefined || props.amount !== null) {
-		amount = (props.amount * value) / 100;
+		console.log("props.amount", props.amount);
+		amount = ((props.amount / 10n ** tokenStore.memeToken.decimals) * value) / 100n;
 	} else if (props.stake) {
-		amount = (walletStore.memeToken.balanceOf * value) / 100;
+		amount = ((walletStore.memeToken.balanceOf / 10n ** tokenStore.memeToken.decimals) * value) / 100n;
 	} else {
-		amount = (walletStore.memeToken.staked * value) / 100;
+		amount = ((walletStore.memeToken.staked / 10n ** tokenStore.memeToken.decimals) * value) / 100n;
 	}
+	console.log("amount", amount);
 	emit("update:modelValue", Number(amount));
 }
 
@@ -78,11 +81,12 @@ async function unstakeBloodline() {
 
 async function stakeBloodline() {
 	try {
+		console.log("stakeBloodline");
 		const fromAddress = walletStore.address;
 		const spender = rewardLockerStore.config.contractAddress;
 		const deadline = Date.now() + 20 * 60;
 		const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
-		const value = (tokenNumber.value * Math.pow(10, decimals)).toString();
+		const value = BigInt(tokenNumber.value) * 10n ** decimals;
 		const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
 		const { types, message, domain, primaryType } = createPermitObject(
 			fromAddress,

src/components/TokenClaim.vue

@@ -21,22 +21,25 @@
 		</div> -->
 		<div class="rewards-list">
 			<rewards-wrapper
+				v-if="getCurrentCycleData?.rewards_sacrifice !== undefined"
 				title="Sacrafice Reward"
 				coin="$BLOOD"
-				:amount="formatNumber(getCurrentCycleData?.rewards_sacrifice)"
+				:amount="formatNumber(getCurrentCycleData?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals)"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
+				v-if="getCurrentCycleData?.rewards_staking !== undefined"
 				title="Staking Bonus"
 				coin="$BLOOD"
-				:amount="formatNumber(getCurrentCycleData?.rewards_staking)"
+				:amount="formatNumber(getCurrentCycleData?.rewards_staking / 10n ** tokenStore.memeToken.decimals)"
 				info="max: 312m"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
+				v-if="getCurrentCycleData?.rewards_clan !== undefined"
 				title="Clan Bonus"
 				coin="$BLOOD"
-				:amount="formatNumber(getCurrentCycleData?.rewards_clan)"
+				:amount="formatNumber(getCurrentCycleData?.rewards_clan / 10n ** tokenStore.memeToken.decimals)"
 				image="/assets/img/vampir.png"
 			/>
 		</div>
@@ -44,8 +47,9 @@
 			<div class="rewards-total-headline sub-header">Total Reward</div>
 			<div class="rewards-total-inner bloodline-border bloodline-border--variant1">
 				<token-name-price
+					v-if="getCurrentCycleData?.rewards_total !== undefined"
 					name="$BLOOD"
-					:price="formatNumber(getCurrentCycleData?.rewards_total)"
+					:price="formatNumber(getCurrentCycleData?.rewards_total / 10n ** tokenStore.memeToken.decimals)"
 				></token-name-price>
 				<token-logo img="/assets/img/vampir.png" :alt="'vampire'"></token-logo>
 			</div>
@@ -171,8 +175,9 @@ async function stakeAndClaim() {
 		});
 		//
 		console.log("rewardData", rewardData);
-		const outputClaim = Number(rewardData?.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
+		console.log("stakeData", stakeData);
-		const outputStaked = Number(stakeData?.topics[3]) / Math.pow(10, tokenStore.memeToken.decimals);
+		const outputClaim = Number(rewardData?.topics[2]) / 10 ** tokenStore.memeToken.decimals;
+		const outputStaked = Number(stakeData?.topics[3]) / 10 ** tokenStore.memeToken.decimals;
 		showSuccessToast(
 			formatNumber(outputClaim + outputStaked),
 			"Success!",
@@ -220,7 +225,7 @@ async function claimRewards() {
 		//
 		console.log("rewardData", rewardData);
 
-		const outputClaim = Number(rewardData.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
+		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
 		showSuccessToast(
 			formatNumber(outputClaim),
 			"Success!",

src/components/TokenInput.vue

@@ -62,10 +62,12 @@ const emit = defineEmits(["update:modelValue"]);
             .stake-adder-step
                 padding: 4px 16px
                 color: var(--black)
-                font-size: 14px
+                font-size: 12px
                 border-width: 1px
                 border-color: transparent
                 border-style: solid
+                @media (min-width: 992px)
+                    font-size: 14px
                 &:hover,&:active, &:focus
                     background-color: var(--grey-light)
                     cursor: pointer

src/components/TokenLogo.vue

@@ -7,7 +7,7 @@
 <script setup>
 const props = defineProps({
 	img: String,
-	alt: Number,
+	alt: String,
 	size: {
 		type: Number,
 		default: 45,

src/components/toasts/ApprovedToast.vue

@@ -17,13 +17,15 @@
 </template>
 <script setup>
 import LoadingComponent from "@/components/LoadingComponent.vue";
-import { getCurrentInstance, computed, watch } from "vue";
+import { getCurrentInstance, computed, watch, inject } from "vue";
 import { useTokenStore } from "@/stores/tokens";
 import { useSacrificeStore } from "@/stores/sacrifice";
 
 import CardComponent from "@/components/CardComponent.vue";
 import { useToast } from "vue-toastification";
 
+const emit = defineEmits(["sacrificed"]);
+
 const props = defineProps({
 	value: String,
 	header: String,
@@ -37,6 +39,8 @@ const sacrificeStore = useSacrificeStore();
 
 const instance = getCurrentInstance();
 const id = instance.attrs["toast-id"];
+const splashBlood = inject("splashBlood");
+
 function closeToast() {
 	toast.dismiss(id);
 }
@@ -64,9 +68,17 @@ const stateComputed = computed(() => {
 });
 
 async function sacrificeClick() {
-	await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, tokenStore.activeToken);
+	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/main.js

@@ -38,7 +38,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
-import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket, faDroplet, faMoon, faPerson } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket, faDroplet, faMoon, faPerson, faWallet } from "@fortawesome/free-solid-svg-icons";
 
 import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
 
@@ -65,9 +65,20 @@ library.add(
 	faChevronUp,
     faDroplet,
     faMoon,
-    faPerson
+    faPerson,
+    faWallet
 );
 
+var logging = localStorage.getItem("LOGGING");
+if (logging === "true") {
+} else {
+	if (!window.console) window.console = {};
+	var methods = ["log", "debug", "warn", "info"];
+	for (let i = 0; i < methods.length; i++) {
+		console[methods[i]] = function () {};
+	}
+}
+
 const app = createApp(App)
 
 
@@ -109,7 +120,10 @@ try {
 				},
 			}),
 			new MetaMaskConnector({ chains }),
-			// new InjectedConnector({ chains }),
+			new InjectedConnector({
+				chains,
+				getProvider: () => (typeof window !== "undefined" ? window.myInjectedWallet : undefined),
+			}),
 			new WalletConnectConnector({
 				chains,
 				options: {
@@ -179,7 +193,8 @@ try {
 			await tokenStore.initV2();
 			await rewardLockerStore.init();
             await walletStore.loadWalletData();
-		    await cycleStore.fillCycle(cycleStore.currentCycle);
+            // console.log("cycleStore.currentCycle", cycleStore.currentCycle);
+		    // await cycleStore.fillCycle(cycleStore.currentCycle);
 			await uniswapStore.init();
 		} else {
 			walletStore.address = null;

src/stores/cycles.js

@@ -62,25 +62,25 @@ export const useCycleStore = defineStore("cycles", {
         //todo check if needed, or use fillcycle
         async updateCurrentCycle(sacrificedToken) {
             console.log("updateCurrentCycle");
-			const tokenStore = useTokenStore();
 			const memeBurnerStore = useMemeburnerStore();
             var data = await memeBurnerStore.getSacrificedCycle(this.currentCycle);
             console.log("this.currentCycle", this.currentCycle);
             console.log("this.cycles", this.cycles);
-			var tokenIndex = this.cycles[this.currentCycle]?.token.findIndex(
+            if (this.cycles[this.currentCycle]) {
+                var tokenIndex = this.cycles[this.currentCycle].token.findIndex(
 					(tokenData) => tokenData.contractAddress === sacrificedToken
 				);
-            console.log("tokenIndex", tokenIndex);
-            const token = tokenStore.getToken(sacrificedToken);
 				this.cycles[this.currentCycle].token[tokenIndex].amount =
-                Number(data[tokenIndex].result[1]) / Math.pow(10, token.decimals)
+					data[tokenIndex].result[1];
+            }
+				
         },
         /**
          * main function to fill a round, will not be filled when already loaded
          * you can use the refillcycle to overwrite information, because if you claim or stake the values will change
          */
 		async fillCycle(cycleNumber, refillCycle = false) {
-			console.log("fillCycle");
+			console.log("fillCycle", cycleNumber);
 			const memeBurnerStore = useMemeburnerStore();
 			const tokenStore = useTokenStore();
 			const walletStore = useWalletStoreV2();
@@ -97,14 +97,18 @@ export const useCycleStore = defineStore("cycles", {
 					rewardData = await rewardLockerStore.getRewardsForAllToken(cycleNumber);
 				}
 
+                console.log("hier");
 				//getTotalSacrificeRewardsForToken multicall for all tokens
 				const tokenTotalSacrificed = await rewardLockerStore.getTotalSacrificeRewardsForAllToken(cycleNumber);
+                console.log("hier1");
 				var goal = await memeBurnerStore.getGoal(cycleNumber);
+                console.log("hier123");
 				var tokenArray = [];
-				var rewards_clan = 0;
+				var rewards_clan = 0n;
-				var rewards_sacrifice = 0;
+				var rewards_sacrifice = 0n;
-				var rewards_staking = 0;
+				var rewards_staking = 0n;
                 
+                console.log("hier123");
 				for (let index = 0; index < data.length; index++) {
 					var tokenData = {};
                     const token = tokenStore.token[index];
@@ -114,47 +118,45 @@ export const useCycleStore = defineStore("cycles", {
 						token.contractAddress
 					);
 					console.log("coefficent", coefficent);
-
 					tokenData.name = token.name;
 					tokenData.contractAddress = token.contractAddress;
 					tokenData.vamplogo = token.vamp.logo;
 					tokenData.vampwinner = token.vamp.winner;
 					tokenData.vampwinner2 = token.vamp.winner2;
 					tokenData.vampname = token.vamp.name;
-					tokenData.amount = Number(data[index].result[1]) / Math.pow(10, token.decimals);
+					tokenData.amount = data[index].result[1]
-					tokenData.amountInBLD = Number(tokenTotalSacrificed[index].result) / Math.pow(10, token.decimals);
+					tokenData.amountInBLD = tokenTotalSacrificed[index].result
 
                     if (walletStore.connected) {
                         //if user is connected fill user specific data for the token
-						const sacrificeClanReward = Number(rewardData[index].result[1]);
+						const sacrificeClanReward = rewardData[index].result[1];
-						let clanwin = 0;
+						let clanwin = 0n;
 						if (cycleNumber !== this.currentCycle) {
-							clanwin = (Number(coefficent) / 10000 - 1) * sacrificeClanReward;
+							clanwin = (coefficent / 10000n - 1n) * sacrificeClanReward;
 							console.log("clanwin", clanwin);
 						}
-						const sacrificeRewards = Number(sacrificeClanReward);
+						const sacrificeRewards = sacrificeClanReward;
 
-						tokenData.rewards_ges = Number(
+						tokenData.rewards_ges = 
-							rewardData[index].result[1] / BigInt(Math.pow(10, token.decimals)) +
+							rewardData[index].result[1]  +
-								rewardData[index].result[0] / BigInt(Math.pow(10, token.decimals))
+								rewardData[index].result[0] 
-						);
 
-						tokenData.rewards_clan = clanwin / Math.pow(10, token.decimals);
+						tokenData.rewards_clan = clanwin
 
-						tokenData.rewards_staking = Number(
+						tokenData.rewards_staking = rewardData[index].result[0]
-							rewardData[index].result[0] / BigInt(Math.pow(10, token.decimals))
+						tokenData.rewards_sacrifice = sacrificeRewards
-						);
-						tokenData.rewards_sacrifice = sacrificeRewards / Math.pow(10, token.decimals);
 
+                        console.log("rewards_clan", rewards_clan);
+                        console.log("tokenData.rewards_clan", tokenData.rewards_clan);
+                        console.log("tokenData.rewards_sacrifice", tokenData.rewards_sacrifice);
 						rewards_clan = rewards_clan + tokenData.rewards_clan;
 						rewards_sacrifice = rewards_sacrifice + tokenData.rewards_sacrifice;
 						rewards_staking = rewards_staking + tokenData.rewards_staking;
 					}
-
 					tokenArray.push(tokenData);
 				}
 
-				const goalDecimal = Number(goal[0]) / Math.pow(10, tokenStore.memeToken.decimals);
+				const goalDecimal = goal[0]
 				const winner = tokenArray.find((token) => token.amount === goalDecimal);
                 const goalInBLD = await memeBurnerStore.getGoalInBLOOD(cycleNumber);
                 //replace vamplogo cause it will automatically change the token for the cycle view (new design)
@@ -162,13 +164,13 @@ export const useCycleStore = defineStore("cycles", {
 					winner.vamplogo = winner.vampwinner;
 				}
 				this.cycles[cycleNumber] = {
-					goal: Number(goal[0]) / Math.pow(10, tokenStore.memeToken.decimals),
+					goal: goal[0],
-					goalInBLD: Number(goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals))),
+					goalInBLD: goalInBLD,
-					expirationTimestamp: Number(goal[2]),
+					expirationTimestamp: goal[2],
-					rewards_clan: Number(rewards_clan),
+					rewards_clan: rewards_clan,
-					rewards_staking: Number(rewards_staking),
+					rewards_staking: rewards_staking,
-					rewards_sacrifice: Number(rewards_sacrifice),
+					rewards_sacrifice: rewards_sacrifice,
-					rewards_total: Number(rewards_clan) + Number(rewards_sacrifice) + Number(rewards_staking),
+					rewards_total: rewards_clan + rewards_sacrifice + rewards_staking,
 					token: tokenArray,
 					connected: walletStore.connected,
 					winner: winner,

src/stores/memeburner.js

@@ -41,6 +41,7 @@ export const useMemeburnerStore = defineStore("memeburner", {
 			return await this.contract.read.currentCycle();
 		},
         async getGoal(cycleNumber) {
+            console.log("hier123", cycleNumber);
 			return await this.contract.read.cycles([cycleNumber]);
 		},
 		//returns participated, amount achieved
@@ -79,6 +80,7 @@ export const useMemeburnerStore = defineStore("memeburner", {
 					return;
 				}
 				this.loading = true;
+
 				// TODO: store all integer values as one type: BigInt
 				const amountDecimal = BigInt(amount) * 10n ** BigInt(tokenStore.activeToken.decimals);
 				var hash = await this.contract.write.sacrificeMeme([

src/stores/rewardlocker.js

@@ -132,7 +132,7 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			const spender = this.config.contractAddress;
 			const deadline = Date.now() + 20 * 60;
 			const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
-			const value = BigInt(tokenNumber * Math.pow(10, decimals));
+			const value = BigInt(tokenNumber) * 10n ** decimals;
 			const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
 			console.log("nonce", nonce);
 			const { types, message, domain, primaryType } = createPermitObject(
@@ -166,13 +166,12 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			return hash;
 		},
 		async stakeAndClaimAllCycles(stakeCoefficient) {
-			console.log("stakeAndClaimAllCycles");
+			console.log("stakeAndClaimAllCycles", stakeCoefficient);
 			const tokenStore = useTokenStore();
 			const cycleStore = useCycleStore();
 			const cycles = await cycleStore.getFinshedCycleNumbers();
 			const addresses = tokenStore.sacrificeToken.map((obj) => obj.contractAddress);
-			var stakeCoefficientInt = Math.round(stakeCoefficient);
+			const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, cycles, addresses]);
-			const hash = await this.contract.write.stakeAndClaim([stakeCoefficientInt, cycles, addresses]);
 			return hash;
 		},
 	},

src/stores/sacrifice.js

@@ -20,6 +20,7 @@ export const useSacrificeStore = defineStore("sacrifice", {
 	actions: {
 		async sacrificeToken(amount, token) {
             console.log("sacrificeToken", { amount, token });
+            
 			const memeburnerStore = useMemeburnerStore();
 			const walletStore = useWalletStoreV2();
             const tokenStore = useTokenStore();
@@ -55,18 +56,19 @@ export const useSacrificeStore = defineStore("sacrifice", {
                 // });
 
                 var rewardData = data.logs.filter((logObject) => {
-					return logObject.topics.filter(
+					return logObject.topics.find(
 						(topic) => topic === "0x5e60ccd3c81486143d815dce24867a494d7fee585a0a44282cf479b19a5186ee"
 					);
 				});
                 console.log("rewardData", rewardData);
+                //output
 				const outputSacrifice = rewardData.reduce((x, y) => {
-					return x + Number(y.data) / Math.pow(10, token.decimals);
+					return x + BigInt(y.data) / 10n ** token.decimals;
-				}, 0);
+				}, 0n);
                 console.log("outputSacrifice", outputSacrifice);
-				// const outputSacrifice = Number(rewardData.data) / Math.pow(10, token.decimals);
 				token.allowance = await tokenStore.allowance();
                 this.sacrificeState = 4;
+
 				showSuccessToast(
 					formatNumber(outputSacrifice),
 					"Success!",
@@ -74,8 +76,9 @@ export const useSacrificeStore = defineStore("sacrifice", {
 					"You can claim once the current cycle is finished and your clan bonus was calculated."
                 );
                 await walletStore.loadWalletData();
+                console.log("cycleStore.currentCycle", cycleStore.currentCycle);
 				await cycleStore.fillCycle(cycleStore.currentCycle, true);
-				return;
+                return true;
             } catch (error) {
                 //we should show the user an issue
                 throw new Error(error);
@@ -187,14 +190,15 @@ export const useSacrificeStore = defineStore("sacrifice", {
                 }
                 //potential staking rewards
                 let stakingRewardsNumber = 0;
-                if (output > 0n && walletStore.connected) {
+                if (output > 0 && walletStore.connected) {
 					const stakingReward = await rewardLockerStore.getStakeRewardForSacrificeReward(
 						token.contractAddress,
 						output
 					);
-                    stakingRewardsNumber = (Number(stakingReward / 10n ** BigInt(token.decimals))).toFixed(2);
+					stakingRewardsNumber = stakingReward / 10n ** token.decimals
                 }
-				return { output: output, variant: variant, minETH: minETH, minBLOOD: minBLOOD, staking: stakingRewardsNumber };
+                const outputNumber = output / 10n ** BigInt(token.decimals);
+				return { output: outputNumber, variant: variant, minETH: minETH, minBLOOD: minBLOOD, staking: stakingRewardsNumber };
 			} catch (error) {
                 console.error("getRewardsFor", error);
 			}

src/stores/tokens.js

@@ -28,6 +28,20 @@ export const useTokenStore = defineStore("token", {
 				backgroundColor: "#4b8501",
 				abi: Meme1Json.abi,
 				contractAddress: Meme1Json.contractAddress,
+				addSteps: [
+					{
+						amount: 10000000000000000000000000n,
+						name: "10m",
+					},
+					{
+						amount: 100000000000000000000000000n,
+						name: "100m",
+					},
+					{
+						amount: 1000000000000000000000000000n,
+						name: "1b",
+					},
+				],
 			},
 			{
 				name: "$SHIB",
@@ -41,6 +55,20 @@ export const useTokenStore = defineStore("token", {
 				},
 				abi: Meme2Json.abi,
 				contractAddress: Meme2Json.contractAddress,
+				addSteps: [
+					{
+						amount: 1000000000000000000000000n,
+						name: "10m",
+					},
+					{
+						amount: 10000000000000000000000000n,
+						name: "100m",
+					},
+					{
+						amount: 100000000000000000000000000n,
+						name: "1b",
+					},
+				],
 			},
 			{
 				name: "$ELON",
@@ -54,6 +82,20 @@ export const useTokenStore = defineStore("token", {
 				},
 				abi: Meme3Json.abi,
 				contractAddress: Meme3Json.contractAddress,
+				addSteps: [
+					{
+						amount: 10000000000000000000000000n,
+						name: "10m",
+					},
+					{
+						amount: 100000000000000000000000000n,
+						name: "100m",
+					},
+					{
+						amount: 1000000000000000000000000000n,
+						name: "1b",
+					},
+				],
 			},
 			// {
 			// 	name: "$BITCOIN",
@@ -125,7 +167,7 @@ export const useTokenStore = defineStore("token", {
 					const data = await multicall({
 						contracts,
                     });
-					token.decimals = data[0].result;
+					token.decimals = BigInt(data[0].result);
 					token.name = data[1].result;
 					token.symbol = data[2].result;
 					token.totalSupply = data[3].result;
@@ -142,9 +184,7 @@ export const useTokenStore = defineStore("token", {
 				walletStore.address,
 				memeBurnerStore.config.contractAddress,
 			]);
-			const decimals = this.activeToken.decimals;
 
-			allowance = BigInt(allowance / BigInt(Math.pow(10, decimals)));
 			console.log("allowance", allowance);
 			return allowance;
 		},
@@ -155,7 +195,7 @@ export const useTokenStore = defineStore("token", {
 				const memeBurnerStore = useMemeburnerStore();
 				var approveHash = await this.activeToken.contract.write.approve([
 					memeBurnerStore.config.contractAddress,
-					amount * Math.pow(10, this.activeToken.decimals),
+					amount,
 				]);
 				console.log("approveHash", approveHash);
 

src/stores/uniswap.js

@@ -4,6 +4,7 @@ import QuoterJson from "@/assets/contracts/Quoter.json";
 import UniswapPoolJson from "@/assets/contracts/UniswapPool.json";
 import BloodlineJson from "@/assets/contracts/Bloodline.json";
 import { useMemeburnerStore } from "@/stores/memeburner";
+import { useTokenStore } from "@/stores/tokens";
 
 import { getContract, multicall } from "@wagmi/core";
 
@@ -43,8 +44,9 @@ export const useUniswapStore = defineStore("uniswap", {
 			try {
                 console.log("quoteExactInputSingle");
                 const memeBurnerStore = useMemeburnerStore();
-				// TODO: change it in your style
+                const tokenStore = useTokenStore();
-				const tokenOut = BloodlineJson.contractAddress;
+                
+                const tokenOut = tokenStore.memeToken.contractAddress;
 				// tokenIn - WETH
 				const tokenIn = BigInt(this.poolData.token0) == BigInt(tokenOut) ? this.poolData.token1 : this.poolData.token0;
 				console.log("quoteExactInputSingle-parameter", {
@@ -62,6 +64,7 @@ export const useUniswapStore = defineStore("uniswap", {
 					ethBase,
 					0, //sqrtPriceLimitX96
                 ]);
+                console.log("quotedAmountOut", quotedAmountOut);
 				return {result: true, amount: quotedAmountOut};
             } catch (error) {
 

src/stores/walletV2.js

@@ -101,10 +101,9 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 			});
 			for (let index = 0; index < tokenStore.token.length; index++) {
                 const token = tokenStore.token[index];
-				const balanceOfDecimal = data[index].result / BigInt(Math.pow(10, token.decimals));
 				this.token.push({
 					contractAddress: token.contractAddress,
-					balanceOf: Number(balanceOfDecimal),
+					balanceOf: data[index].result
 				});
 			}
         },
@@ -118,11 +117,10 @@ export const useWalletStoreV2 = defineStore("walletV2", {
             await this.getTokenBalances();
             //MemeToken Staked
             const tokenStore = useTokenStore();
-            const staked = await rewardlockerStore.getStaked(this.address);
+            this.memeToken.staked = await rewardlockerStore.getStaked(this.address);
-            this.memeToken.staked = Number(staked) / Math.pow(10, tokenStore.memeToken.decimals);
             const unclaimedRewardsArray = await rewardlockerStore.getTotalRewards(this.address);
             const unclaimedRewards = unclaimedRewardsArray[0] + unclaimedRewardsArray[1];
-            this.memeToken.unclaimedRewards = Number(unclaimedRewards) / Math.pow(10, tokenStore.memeToken.decimals)
+            this.memeToken.unclaimedRewards = unclaimedRewards 
 
         }
 	},

src/views/CycleView.vue

@@ -27,7 +27,9 @@
 			>
 				<template v-if="difference > 0">
 					<div class="round-finish-info-key">Sacrifice Goal:</div>
-					<div class="round-finish-info-value">{{ cycleStore.getCurrentCycleData?.goalInBLD }} $BDL</div>
+					<div class="round-finish-info-value">
+						{{ cycleStore.getCurrentCycleData?.goalInBLD / 10n ** tokenStore.memeToken.decimals }} $BDL
+					</div>
 					<div class="round-finish-info-key">Time left:</div>
 					<div class="round-finish-info-value">{{ days }} {{ hours }} {{ minutes }}</div>
 				</template>
@@ -88,6 +90,8 @@ import { inject, ref, onMounted, onBeforeUnmount } from "vue";
 
 import BloodChart from "@/components/BloodChart.vue";
 import TokenClaim from "@/components/TokenClaim.vue";
+import { useTokenStore } from "@/stores/tokens";
+
 import { useMemeburnerStore } from "@/stores/memeburner";
 import LoadingComponent from "@/components/LoadingComponent.vue";
 
@@ -95,6 +99,7 @@ import { useCycleStore } from "@/stores/cycles";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 
 const cycleStore = useCycleStore();
+const tokenStore = useTokenStore();
 
 const days = ref(null);
 const hours = ref(null);