update bigint + smaller style issues fixes

package-lock.json

@@ -23,7 +23,8 @@
                 "vue": "^3.3.2",
                 "vue-collapsed": "^1.2.8",
                 "vue-router": "^4.2.0",
-                "vue-toastification": "^2.0.0-rc.5"
+                "vue-toastification": "^2.0.0-rc.5",
+                "vue3-lottie": "^3.2.0"
             },
             "devDependencies": {
                 "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
@@ -3941,6 +3942,11 @@
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
             "dev": true
         },
+        "node_modules/lodash-es": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+        },
         "node_modules/lodash.isequal": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -3964,6 +3970,11 @@
                 "loose-envify": "cli.js"
             }
         },
+        "node_modules/lottie-web": {
+            "version": "5.12.2",
+            "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+            "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+        },
         "node_modules/lru-cache": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -5822,6 +5833,21 @@
                 "vue": "^3.0.2"
             }
         },
+        "node_modules/vue3-lottie": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.2.0.tgz",
+            "integrity": "sha512-PtNXbv7iD4XGmK8CXd71aLWmILIR6P6VzLMDw6ZzmDAeuJZuJ0MdOVnn50LOARgq+cOFJsn/2z+7tZh0F9T9qw==",
+            "dependencies": {
+                "lodash-es": "^4.17.21",
+                "lottie-web": "5.12.2"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "vue": "^3.2"
+            }
+        },
         "node_modules/web3-eth-abi": {
             "version": "1.10.1",
             "resolved": "https://registry.npmjs.org/web3-eth-abi/-/web3-eth-abi-1.10.1.tgz",

package.json

@@ -24,7 +24,8 @@
         "vue": "^3.3.2",
         "vue-collapsed": "^1.2.8",
         "vue-router": "^4.2.0",
-        "vue-toastification": "^2.0.0-rc.5"
+        "vue-toastification": "^2.0.0-rc.5",
+        "vue3-lottie": "^3.2.0"
     },
     "devDependencies": {
         "@esbuild-plugins/node-globals-polyfill": "^0.2.3",

src/App.vue

@@ -260,4 +260,10 @@ body:hover::-webkit-scrollbar-thumb
 
 .toast-header, .toast-body
     font-size: 16px
+
+.Vue-Toastification__container
+    &.bloodline-toast-container
+        &.top-right
+            @media (min-width: 992px)
+                top: 100px
 </style>

src/components/ClaimComponent.vue

@@ -4,12 +4,12 @@
 		<template v-slot:body>
 			<token-name-price
 				:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
-				:price="walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals"
+				:price="formatNumber(walletStore.unclaimedRewards)"
 			></token-name-price>
 			<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline logo'"></token-logo>
 		</template>
 		<template v-slot:actions>
-			<template v-if="walletStore.memeToken?.unclaimedRewards > 0">
+			<template v-if="walletStore.unclaimedRewards > 0">
 				<Transition name="smooth">
 					<div class="connected-stake-buttons" v-show="!stakeMenu">
 						<div class="btn btn-immortal mid-mid-text" @click="claimAll" v-if="stateStake === 0">Claim</div>
@@ -26,9 +26,9 @@
 					<stake-menu
 						v-model="tokenNumber"
 						@close="stakeMenu = false"
-						:amount="walletStore.memeToken?.unclaimedRewards"
+						:amount="walletStore.unclaimedRewards"
 						:stake="stake"
-						v-if="stakeMenu && walletStore.memeToken?.unclaimedRewards"
+						v-if="stakeMenu"
 					>
 						<template v-slot:body>
 							<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 0">
@@ -55,13 +55,9 @@
 							</div>
 						</template>
 						<template v-slot:message-end>
-							<div class="input-balance" v-if="walletStore.memeToken?.unclaimedRewards">
+							<div class="input-balance">
 								Balance:
-								{{
+								{{ formatNumber(walletStore.unclaimedRewards) }}
-									formatNumber(
-										walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals
-									)
-								}}
 							</div>
 						</template>
 					</stake-menu>

src/components/SacrificeToken.vue

@@ -358,8 +358,8 @@ async function changeActiveToken(token) {
 	console.log("changeActiveToken");
 	tokenStore.activeToken = token;
 	if (walletStore.connected) {
-		//TODO, wenn connected, dann all diese Daten laden?
+		// //TODO, wenn connected, dann all diese Daten laden?
-		tokenStore.activeToken.balance = await walletStore.getTokenBalance(token);
+		// tokenStore.activeToken.balance = await walletStore.getTokenBalance(token);
 		tokenStore.activeToken.allowance = Number(await tokenStore.allowance());
 	}
 	var rewards = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, token);

src/components/StakeComponentV1.vue

@@ -80,7 +80,7 @@
 						v-model="tokenNumber"
 						@close="stakeMenu = false"
 						:stake="stake"
-						:amount="walletStore.memeToken?.balanceOf"
+						:amount="balanceOf"
 						v-if="stakeMenu & !unstakeMenu"
 					>
 						<template v-slot:body>
@@ -104,9 +104,7 @@
 							</div>
 						</template>
 						<template v-slot:message-end>
-							<div class="input-balance">
+							<div class="input-balance">Balance: {{ formatNumber(balanceOf) }}</div>
-								Balance: {{ walletStore.memeToken?.balanceOf / 10n ** tokenStore.memeToken.decimals }}
-							</div>
 						</template>
 					</stake-menu>
 					<div class="unstake-menu" v-else-if="stakeMenu & unstakeMenu">
@@ -136,6 +134,9 @@
 				<div class="connected-stake-first-round small-text text-center" v-if="cycleStore.currentCycle === 0">
 					No $BLOOD on the market. Staking is activated after the first cycle is finished.
 				</div>
+				<div class="connected-stake-first-round small-text text-center" v-else>
+					You can claim your stake next cycle
+				</div>
 			</slot>
 			<slot></slot>
 		</div>
@@ -276,6 +277,14 @@ async function stakeToken() {
 	}
 }
 
+const balanceOf = computed(() => {
+	if (!walletStore.memeToken?.balanceOf) {
+		return 0n;
+	} else {
+		return walletStore.memeToken?.balanceOf / 10n ** tokenStore.memeToken.decimals;
+	}
+});
+
 const stateStake = computed(() => {
 	let returnState = 0;
 	if (state.value === 2) {

src/components/StakeMenu.vue

@@ -39,8 +39,8 @@ const tokenStore = useTokenStore();
 
 const props = defineProps({
 	stake: Boolean,
-	modelValue: Number,
+	modelValue: [Number, BigInt],
-	amount: Number,
+	amount: [Number, BigInt],
 });
 
 const emit = defineEmits(["close", "update:modelValue"]);
@@ -48,15 +48,14 @@ const emit = defineEmits(["close", "update:modelValue"]);
 async function addTokensPercent(value) {
 	console.log("value", value);
 	console.log("props.amount", props.amount);
-	console.log(walletStore.memeToken.balanceOf / 10n ** tokenStore.memeToken.decimals);
 	let amount;
 	if (props.amount !== undefined || props.amount !== null) {
 		console.log("props.amount", props.amount);
-		amount = ((props.amount / 10n ** tokenStore.memeToken.decimals) * value) / 100n;
+		amount = (props.amount * value) / 100n;
 	} else if (props.stake) {
-		amount = ((walletStore.memeToken.balanceOf / 10n ** tokenStore.memeToken.decimals) * value) / 100n;
+		amount = (walletStore.memeToken.balanceOf * value) / 100n;
 	} else {
-		amount = ((walletStore.memeToken.staked / 10n ** tokenStore.memeToken.decimals) * value) / 100n;
+		amount = (walletStore.memeToken.staked * value) / 100n;
 	}
 	console.log("amount", amount);
 	emit("update:modelValue", Number(amount));

src/components/TokenClaim.vue

@@ -21,36 +21,31 @@
 		</div> -->
 		<div class="rewards-list">
 			<rewards-wrapper
-				v-if="getCurrentCycleData?.rewards_sacrifice !== undefined"
 				title="Sacrafice Reward"
 				coin="$BLOOD"
-				:amount="formatNumber(getCurrentCycleData?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals)"
+				:amount="formatNumber(rewardsSacrifice)"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
-				v-if="getCurrentCycleData?.rewards_staking !== undefined"
 				title="Staking Bonus"
 				coin="$BLOOD"
-				:amount="formatNumber(getCurrentCycleData?.rewards_staking / 10n ** tokenStore.memeToken.decimals)"
+				:amount="formatNumber(rewardsStaking)"
-				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 / 10n ** tokenStore.memeToken.decimals)"
+				:amount="formatNumber(rewardsClan)"
 				image="/assets/img/vampir.png"
 			/>
 		</div>
 		<div class="rewards-total-wrapper">
 			<div class="rewards-total-headline sub-header">Total Reward</div>
-			<div class="rewards-total-inner bloodline-border bloodline-border--variant1">
+			<div
-				<token-name-price
+				class="rewards-total-inner bloodline-border bloodline-border--variant1"
-					v-if="getCurrentCycleData?.rewards_total !== undefined"
+				:class="{ purple: rewardsTotal > 0 && activeCycle !== currentCycle }"
-					name="$BLOOD"
+			>
-					:price="formatNumber(getCurrentCycleData?.rewards_total / 10n ** tokenStore.memeToken.decimals)"
+				<token-name-price name="$BLOOD" :price="formatNumber(rewardsTotal)"></token-name-price>
-				></token-name-price>
 				<token-logo img="/assets/img/vampir.png" :alt="'vampire'"></token-logo>
 			</div>
 		</div>
@@ -61,7 +56,7 @@
 			<template v-else-if="activeCycle === currentCycle">
 				<button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">Sacrifice</button>
 			</template>
-			<template v-else-if="getCurrentCycleData?.rewards_total > 0">
+			<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>
@@ -77,7 +72,7 @@
 						v-model="tokenNumber"
 						@close="stakeMenu = false"
 						:stake="stake"
-						:amount="getCurrentCycleData?.rewards_total"
+						:amount="rewardsTotal"
 						v-if="stakeMenu"
 					>
 						<template v-slot:body>
@@ -139,7 +134,8 @@ const tokenStore = useTokenStore();
 const cycleStore = useCycleStore();
 const router = useRouter();
 
-const { activeCycle, currentCycle, getCurrentCycleData } = storeToRefs(cycleStore);
+const { activeCycle, currentCycle, getCurrentCycleData, rewardsSacrifice, rewardsStaking, rewardsClan, rewardsTotal } =
+	storeToRefs(cycleStore);
 
 const stakeMenu = ref(false);
 const stake = ref(null);
@@ -149,13 +145,16 @@ const stateStakeClaim = ref(0);
 
 async function stakeAndClaim() {
 	try {
+		console.log("stakeAndClaim");
 		console.log(tokenNumber.value);
-		console.log(getCurrentCycleData.value.rewards_total);
+		console.log(rewardsTotal.value);
-		const coefficient = (10000 * tokenNumber.value) / getCurrentCycleData.value.rewards_total;
 		stateStakeClaim.value = 2;
+		console.log("hier1");
+		const coefficient = (10000n * BigInt(tokenNumber.value)) / rewardsTotal.value;
 		var hash = await rewardLockerStore.stakeAndClaimCycle(coefficient, cycleStore.activeCycle);
-		console.log("hash");
+		console.log("hier2");
 		stateStakeClaim.value = 3;
+		console.log("hash");
 		const data = await waitForTransaction({
 			hash: hash,
 		});
@@ -176,8 +175,8 @@ async function stakeAndClaim() {
 		//
 		console.log("rewardData", rewardData);
 		console.log("stakeData", stakeData);
-		const outputClaim = Number(rewardData?.topics[2]) / 10 ** tokenStore.memeToken.decimals;
+		const outputClaim = BigInt(rewardData?.topics[2]) / 10n ** tokenStore.memeToken.decimals;
-		const outputStaked = Number(stakeData?.topics[3]) / 10 ** tokenStore.memeToken.decimals;
+		const outputStaked = BigInt(stakeData?.topics[3]) / 10n ** tokenStore.memeToken.decimals;
 		showSuccessToast(
 			formatNumber(outputClaim + outputStaked),
 			"Success!",
@@ -186,13 +185,15 @@ async function stakeAndClaim() {
 		);
 		tokenNumber.value = 0;
 		stakeMenu.value = false;
-		await cycleStore.fillCycle(activeCycle.value, true);
 		await walletStore.loadWalletData();
 	} catch (error) {
 		console.error("stakeAndClaim", error);
 	} finally {
 		const walletStore = useWalletStoreV2();
 		await walletStore.loadWalletData();
+		console.log("finally1");
+		await cycleStore.fillCycle(activeCycle.value, true);
+		console.log("finally2");
 		stateStakeClaim.value = 1;
 	}
 }
@@ -254,19 +255,19 @@ const stateClaimedComp = computed(() => {
 const stateStakeClaimComp = computed(() => {
 	console.log("stateStakeClaimComp");
 	let returnState = 0;
-	if (
+	if (stateStakeClaim.value === 2) {
-		tokenNumber.value === null ||
-		tokenNumber.value === "" ||
-		tokenNumber.value === 0 ||
-		tokenNumber.value > walletStore.memeToken?.unclaimedRewards
-	) {
-		returnState = 0;
-	} else if (stateStakeClaim.value === 2) {
 		returnState = 2;
 	} else if (stateStakeClaim.value === 3) {
 		returnState = 3;
 	} else if (tokenNumber.value !== null || tokenNumber.value !== "" || tokenNumber.value > 0) {
 		returnState = 1;
+	} else if (
+		tokenNumber.value === null ||
+		tokenNumber.value === "" ||
+		tokenNumber.value === 0 ||
+		tokenNumber.value > walletStore.unclaimedRewards
+	) {
+		returnState = 0;
 	}
 	return returnState;
 });

src/components/TokenInput.vue

@@ -14,7 +14,7 @@
 				</div>
 			</div>
 			<div class="right-side">
-				<token-logo :img="props.logo" :alt="'vampir'"></token-logo>
+				<token-logo img="/assets/img/vampir.png" :alt="'vampir'"></token-logo>
 			</div>
 		</div>
 	</div>

src/main.js

@@ -91,6 +91,7 @@ app.use(pinia);
 
 app.use(Toast, {
 	transition: "Vue-Toastification__fade",
+	containerClassName: "bloodline-toast-container",
 });
 
 
@@ -164,9 +165,9 @@ try {
 		},
 		async (log) => {
 			console.log("CycleCompleted", log);
-			await cycleStore.fillCycle(cycleStore.currentCycle);
+			await cycleStore.fillCycle(cycleStore.currentCycle, true);
 			cycleStore.currentCycle++;
-            await cycleStore.fillCycle(cycleStore.currentCycle);
+            await cycleStore.fillCycle(cycleStore.currentCycle, true);
 		}
 	);
 

src/stores/cycles.js

@@ -30,6 +30,34 @@ export const useCycleStore = defineStore("cycles", {
 		getCurrentCycleData() {
 			return this.cycles[this.activeCycle];
 		},
+		rewardsSacrifice() {
+			const tokenStore = useTokenStore();
+			if (!this.cycles[this.activeCycle]?.rewards_sacrifice) {
+				return 0n;
+			}
+			return this.cycles[this.activeCycle]?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals;
+		},
+		rewardsStaking() {
+			const tokenStore = useTokenStore();
+			if (!this.cycles[this.activeCycle]?.rewards_staking) {
+				return 0n;
+			}
+			return this.cycles[this.activeCycle]?.rewards_staking / 10n ** tokenStore.memeToken.decimals;
+		},
+		rewardsClan() {
+			const tokenStore = useTokenStore();
+			if (!this.cycles[this.activeCycle]?.rewards_clan) {
+				return 0n;
+			}
+			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;
+		},
 	},
 	actions: {
 		//todo check if still needed
@@ -70,10 +98,8 @@ export const useCycleStore = defineStore("cycles", {
 				var tokenIndex = this.cycles[this.currentCycle].token.findIndex(
 					(tokenData) => tokenData.contractAddress === sacrificedToken
 				);
-				this.cycles[this.currentCycle].token[tokenIndex].amount =
+				this.cycles[this.currentCycle].token[tokenIndex].amount = data[tokenIndex].result[1];
-					data[tokenIndex].result[1];
 			}
-				
 		},
 		/**
 		 * main function to fill a round, will not be filled when already loaded
@@ -124,8 +150,8 @@ export const useCycleStore = defineStore("cycles", {
 					tokenData.vampwinner = token.vamp.winner;
 					tokenData.vampwinner2 = token.vamp.winner2;
 					tokenData.vampname = token.vamp.name;
-					tokenData.amount = data[index].result[1]
+					tokenData.amount = data[index].result[1];
-					tokenData.amountInBLD = tokenTotalSacrificed[index].result
+					tokenData.amountInBLD = tokenTotalSacrificed[index].result;
 
 					if (walletStore.connected) {
 						//if user is connected fill user specific data for the token
@@ -137,14 +163,12 @@ export const useCycleStore = defineStore("cycles", {
 						}
 						const sacrificeRewards = sacrificeClanReward;
 
-						tokenData.rewards_ges = 
+						tokenData.rewards_ges = rewardData[index].result[1] + rewardData[index].result[0];
-							rewardData[index].result[1]  +
-								rewardData[index].result[0] 
 
-						tokenData.rewards_clan = clanwin
+						tokenData.rewards_clan = clanwin;
 
-						tokenData.rewards_staking = rewardData[index].result[0]
+						tokenData.rewards_staking = rewardData[index].result[0];
-						tokenData.rewards_sacrifice = sacrificeRewards
+						tokenData.rewards_sacrifice = sacrificeRewards;
 
 						console.log("rewards_clan", rewards_clan);
 						console.log("tokenData.rewards_clan", tokenData.rewards_clan);
@@ -156,7 +180,7 @@ export const useCycleStore = defineStore("cycles", {
 					tokenArray.push(tokenData);
 				}
 
-				const goalDecimal = goal[0]
+				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)

src/stores/memeburner.js

@@ -81,12 +81,10 @@ export const useMemeburnerStore = defineStore("memeburner", {
 				}
 				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([
 					tokenStore.activeToken.contractAddress,
-                    amountDecimal.toString(),
+                    amount,
-                    minETH.toString()
+                    minETH
 				]);
 				return hash;
 			} catch (error) {

src/stores/rewardlocker.js

@@ -160,9 +160,6 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			const tokenStore = useTokenStore();
 			const addresses = tokenStore.sacrificeToken.map((obj) => obj.contractAddress);
 			const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, [cycle], addresses]);
-			const data = await waitForTransaction({
-				hash: hash,
-			});
 			return hash;
 		},
 		async stakeAndClaimAllCycles(stakeCoefficient) {

src/stores/sacrifice.js

@@ -29,7 +29,9 @@ export const useSacrificeStore = defineStore("sacrifice", {
 
 			try {
                 this.sacrificeState = 2;
+                console.log("hier");
                 const getRewards = await this.getRewardsFor(amount, token);
+                console.log("hier1");
                 console.log("getRewards", getRewards);
 				let hash = null;
 				if (getRewards.variant === "sacrifice") {
@@ -86,31 +88,30 @@ export const useSacrificeStore = defineStore("sacrifice", {
 				this.sacrificeState = 0;
             }
 		},
-        async getRewardsFor(value, token) {
+        async getRewardsFor(amount, token) {
-            console.log("getRewardsFor", {value, token});
+            console.log("getRewardsFor", {amount, token});
 			const memeburnerStore = useMemeburnerStore();
 			const uniswapStore = useUniswapStore();
             const walletStore = useWalletStoreV2();
             const rewardLockerStore = useRewardLockerStore();
-			// what is value here? i thought amount and value are same
-			const amountDecimal = BigInt(value) * 10n ** BigInt(token.decimals == undefined ? 18n : token.decimals);
 			let output = 0;
-			const amountETHBase = await memeburnerStore.getAmountETHBase(amountDecimal);
-			// take 99.5% of amount ETH got for selling meme, 0.5% allowed slippage
-			const minETH = amountETHBase[1] * 995n / 1000n;
 
 			let minBLOOD;
 
             try {
-				if (!value || isNaN(value)) {
+                
+				if (!amount) {
 					this.sacrificeState = 0;
 					return output;
 				}
+                const amountETHBase = await memeburnerStore.getAmountETHBase(amount);
+				// take 99.5% of amount ETH got for selling meme, 0.5% allowed slippage
+				const minETH = (amountETHBase[1] * 995n) / 1000n;
 
-				const rewardsForResult = await memeburnerStore.getRewardFor(amountDecimal);
+				const rewardsForResult = await memeburnerStore.getRewardFor(amount);
 				const rewardsForResultSum = rewardsForResult[0] + rewardsForResult[1];
 				// quote blood amount against ETH base amount
-				var quoteRewards = await uniswapStore.quoteExactInputSingle(amountDecimal, amountETHBase[0]);
+				var quoteRewards = await uniswapStore.quoteExactInputSingle(amount, amountETHBase[0]);
 
 				let variant = "sacrifice";
 				if (quoteRewards.result) {
@@ -138,9 +139,8 @@ export const useSacrificeStore = defineStore("sacrifice", {
 					output = rewardsForResultSum;
 				}
 				console.log("variant", variant);
-				console.log("amountDecimal", amountDecimal);
+				console.log("amount", amount);
-				// TODO: when token.allowance become BigInt with decimals, value must be amountDecimal
+				if (!walletStore.connected || (walletStore.connected && token.allowance < amount)) {
-				if (!walletStore.connected || (walletStore.connected && token.allowance < value)) {
 					/**
 					 * case 1
 					 * user is not logged in or Allowance is less than Input, then I show getRewardsForSacrifice Value
@@ -166,7 +166,7 @@ export const useSacrificeStore = defineStore("sacrifice", {
 						address: memeburnerStore.contract.address,
 						abi: memeburnerStore.contract.abi,
 						functionName: "sacrificeMeme",
-						args: [token.contractAddress, amountDecimal.toString(), minETH.toString()],
+						args: [token.contractAddress, amount.toString(), minETH.toString()],
 						account: walletStore.address,
 					});
 
@@ -174,7 +174,7 @@ export const useSacrificeStore = defineStore("sacrifice", {
 						address: memeburnerStore.contract.address,
 						abi: memeburnerStore.contract.abi,
 						functionName: "sacrificeMemeAndBuyBLOOD",
-						args: [token.contractAddress, amountDecimal.toString(), minBLOOD.toString()],
+						args: [token.contractAddress, amount.toString(), minBLOOD.toString()],
 						account: walletStore.address,
 					});
 

src/stores/tokens.js

@@ -122,6 +122,7 @@ export const useTokenStore = defineStore("token", {
 			// 	contractAddress: Meme5Json.contractAddress,
 			// },
             {
+                name: "$BLOOD",
 				abi: BloodlineJson.abi,
 				contractAddress: BloodlineJson.contractAddress,
 				logo: "/assets/img/token/bloodline.png",
@@ -161,16 +162,16 @@ export const useTokenStore = defineStore("token", {
 					});
 
 					contracts.push({ ...token.contract, functionName: "decimals" });
-					contracts.push({ ...token.contract, functionName: "name" });
+					// contracts.push({ ...token.contract, functionName: "name" });
 					contracts.push({ ...token.contract, functionName: "symbol" });
 					contracts.push({ ...token.contract, functionName: "totalSupply" });
 					const data = await multicall({
 						contracts,
                     });
 					token.decimals = BigInt(data[0].result);
-					token.name = data[1].result;
+					// token.name = data[1].result;
-					token.symbol = data[2].result;
+					token.symbol = data[1].result;
-					token.totalSupply = data[3].result;
+					token.totalSupply = data[2].result;
 				}
 			} catch (error) {
 				console.error("initV2", error);

src/stores/walletV2.js

@@ -41,16 +41,25 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 		token: [],
 	}),
 	getters: {
-        sacrificeToken: (state) => state.token.filter((obj) => {
+		sacrificeToken: (state) =>
+			state.token.filter((obj) => {
 				const tokenStore = useTokenStore();
 
 				return obj.contractAddress !== tokenStore.memeToken.contractAddress;
 			}),
-        memeToken: (state) => state.token.find((obj) => {
+		memeToken: (state) =>
+			state.token.find((obj) => {
 				const tokenStore = useTokenStore();
 
 				return obj.contractAddress === tokenStore.memeToken.contractAddress;
 			}),
+		unclaimedRewards() {
+            const tokenStore = useTokenStore();
+            if (!this.memeToken?.unclaimedRewards) {
+                return 0n;
+            }
+            return this.memeToken.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
+		},
 	},
 	actions: {
 		async init() {
@@ -62,7 +71,6 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				this.address = account.address;
 				this.connected = true;
 			}
-                
 		},
 		async connectWallet(connector) {
 			try {
@@ -88,7 +96,7 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 		},
 		async getTokenBalances() {
 			console.log("getTokenBalances");
-            this.token = []
+			this.token = [];
 			const tokenStore = useTokenStore();
 			var contracts = [];
 			for (let index = 0; index < tokenStore.token.length; index++) {
@@ -103,13 +111,13 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				const token = tokenStore.token[index];
 				this.token.push({
 					contractAddress: token.contractAddress,
-					balanceOf: data[index].result
+					balanceOf: data[index].result,
 				});
 			}
 		},
 		async loadWalletData() {
 			if (!this.connected) {
-                return
+				return;
 			}
 			console.log("loadWalletData");
 			const rewardlockerStore = useRewardLockerStore();
@@ -120,9 +128,8 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 			this.memeToken.staked = await rewardlockerStore.getStaked(this.address);
 			const unclaimedRewardsArray = await rewardlockerStore.getTotalRewards(this.address);
 			const unclaimedRewards = unclaimedRewardsArray[0] + unclaimedRewardsArray[1];
-            this.memeToken.unclaimedRewards = unclaimedRewards 
+			this.memeToken.unclaimedRewards = unclaimedRewards;
-
+		},
-        }
 	},
 	// persist: true,
 });

src/views/CycleView.vue

@@ -79,7 +79,12 @@
 				<div class="bloodline-container">
 					<div class="bloodline-border purple">Get up to +25% Clan Bonus on your sacrifice.</div>
 				</div>
+				<template v-if="!cycleStore.cycles[cycleStore.activeCycle]">
+					<Vue3Lottie :animationData="ChartLoading" :height="400" :width="400" />
+				</template>
+				<template v-else>
 					<blood-chart :data="cycleStore.cycles[cycleStore.activeCycle]"></blood-chart>
+				</template>
 			</div>
 		</div>
 	</div>
@@ -98,6 +103,9 @@ import LoadingComponent from "@/components/LoadingComponent.vue";
 import { useCycleStore } from "@/stores/cycles";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 
+import { Vue3Lottie } from "vue3-lottie";
+import ChartLoading from "@/assets/lottie/ChartLoading.json";
+
 const cycleStore = useCycleStore();
 const tokenStore = useTokenStore();
 

yarn.lock

@@ -2415,6 +2415,11 @@
   dependencies:
     "p-locate" "^5.0.0"
 
+"lodash-es@^4.17.21":
+  "integrity" "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+  "resolved" "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
+  "version" "4.17.21"
+
 "lodash.isequal@4.5.0":
   "integrity" "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
   "resolved" "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz"
@@ -2437,6 +2442,11 @@
   dependencies:
     "js-tokens" "^3.0.0 || ^4.0.0"
 
+"lottie-web@5.12.2":
+  "integrity" "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+  "resolved" "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz"
+  "version" "5.12.2"
+
 "lru-cache@^6.0.0":
   "integrity" "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA=="
   "resolved" "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
@@ -3288,7 +3298,7 @@
   "resolved" "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz"
   "version" "2.0.0-rc.5"
 
-"vue@^2.6.14 || ^3.3.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.2", "vue@^3.2.0", "vue@^3.2.25", "vue@^3.3.2", "vue@>= 3.0.0 < 4", "vue@3.3.4":
+"vue@^2.6.14 || ^3.3.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.2", "vue@^3.2", "vue@^3.2.0", "vue@^3.2.25", "vue@^3.3.2", "vue@>= 3.0.0 < 4", "vue@3.3.4":
   "integrity" "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw=="
   "resolved" "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz"
   "version" "3.3.4"
@@ -3299,6 +3309,14 @@
     "@vue/server-renderer" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"vue3-lottie@^3.2.0":
+  "integrity" "sha512-PtNXbv7iD4XGmK8CXd71aLWmILIR6P6VzLMDw6ZzmDAeuJZuJ0MdOVnn50LOARgq+cOFJsn/2z+7tZh0F9T9qw=="
+  "resolved" "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.2.0.tgz"
+  "version" "3.2.0"
+  dependencies:
+    "lodash-es" "^4.17.21"
+    "lottie-web" "5.12.2"
+
 "web3-eth-abi@^1.2.1":
   "integrity" "sha512-hk5NyeGweJYTjes7lBW7gtG7iYoN6HLt6E4FQDrHPdwZjwNmvzaOH9N8zMTCxNFXUlg0bzeTOzWwMA717a+4eg=="
   "resolved" "https://registry.npmjs.org/web3-eth-abi/-/web3-eth-abi-1.10.1.tgz"