update loading cycle + potential staking rewards

src/components/SacrificeToken.vue

@@ -14,7 +14,7 @@
 					]"
 					v-for="token in props.data"
 					:key="token.contractAddress"
-					@click="tokenStore.changeActiveToken(token)"
+					@click="changeActiveToken(token)"
 				>
 					<div class="sacrifice-token-logo">
 						<img v-if="isMobile" :src="token.logoMobile" alt="token logo" />
@@ -90,7 +90,7 @@
 						>
 							No Staking Bonus
 						</div>
-						<div class="mid-mid-text" v-else>+ TODO Staking Bonus</div>
+						<div class="mid-mid-text" v-else>+ {{ stakingOutput }} Staking Bonus</div>
 						<div class="icon">
 							<font-awesome-icon icon="chevron-down" />
 						</div>
@@ -189,6 +189,7 @@ const props = defineProps({
 });
 
 const output = ref(0);
+const stakingOutput = ref(null);
 const blockEvent = ref(null);
 const approveToast = ref(null);
 /**
@@ -231,8 +232,9 @@ const stateComputed = computed(() => {
 	return returnState;
 });
 const processChange = debounce(async (value) => {
-	const returnValue = await sacrificeStore.getRewardsFor(value, activeToken.value);
-	output.value = returnValue.output;
+	const rewardValue = await sacrificeStore.getRewardsFor(value, activeToken.value);
+	output.value = rewardValue.output;
+	stakingOutput.value = rewardValue.staking;
 });
 
 onMounted(() => {
@@ -244,6 +246,7 @@ onMounted(() => {
 			console.log("blockNumber", blockNumber);
 			var rewardValue = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value);
 			output.value = rewardValue.output;
+			stakingOutput.value = rewardValue.staking;
 		}
 	);
 });
@@ -275,12 +278,16 @@ async function approveToken(amount) {
 
 async function addTokens(value) {
 	sacrificeStore.sacrificeNumber = Number(sacrificeStore.sacrificeNumber) + Number(value);
-	output.value = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value).output;
+	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;
-	output.value = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value).output;
+	const rewardValue = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value);
+	output.value = rewardValue.output;
+	stakingOutput.value = rewardValue.staking;
 }
 
 function showApprovedToast(value, header, subheader, info) {
@@ -310,11 +317,26 @@ function showApprovedToast(value, header, subheader, info) {
 		toastClassName: "approve-toast toast-card",
 	});
 }
+
 //call function in the store and remove icon,
 async function sacrificeToken() {
 	await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, activeToken.value);
 	toast.dismiss(approveToast.value);
 }
+
+async function changeActiveToken(token) {
+	console.log("changeActiveToken");
+	tokenStore.activeToken = token;
+	if (walletStore.connected) {
+		//TODO, wenn connected, dann all diese Daten laden?
+		tokenStore.activeToken.balance = await walletStore.getTokenBalance(token);
+		tokenStore.activeToken.allowance = Number(await tokenStore.allowance());
+	}
+	var rewards = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, token);
+	console.log("rewards", rewards);
+	output.value = rewards.output;
+	stakingOutput.value = rewards.staking;
+}
 </script>
 
 <style lang="sass">

src/components/TokenClaim.vue

@@ -77,8 +77,6 @@
 						v-if="stakeMenu"
 					>
 						<template v-slot:body>
-							{{ stateStakeClaimComp }}
-							{{ stateStakeClaim }}
 							<div class="btn btn-immortal stake-button" disabled v-if="stateStakeClaimComp === 0">
 								Enter Amount
 							</div>
@@ -150,11 +148,7 @@ async function stakeAndClaim() {
 		console.log(tokenNumber.value);
 		console.log(getCurrentCycleData.value.rewards_total);
 		const coefficient = (10000 * tokenNumber.value) / getCurrentCycleData.value.rewards_total;
-		console.log("hier");
 		stateStakeClaim.value = 2;
-		console.log("hier2");
-		console.log("coefficient", coefficient);
-		console.log("cycleStore.activeCycle", cycleStore.activeCycle);
 		var hash = await rewardLockerStore.stakeAndClaimCycle(coefficient, cycleStore.activeCycle);
 		console.log("hash");
 		stateStakeClaim.value = 3;
@@ -169,15 +163,26 @@ async function stakeAndClaim() {
 				(topic) => topic === "0xd0813ff03c470dcc7baa9ce36914dc2febdfd276d639deffaac383fd3db42ba3"
 			);
 		});
+
+		var stakeData = data.logs.find((logObject) => {
+			return logObject.topics.find(
+				(topic) => topic === "0xf496bf2b14b1d178412b6f7a745900105b49b38b315cfdfbfabad31a6f995c6f"
+			);
+		});
 		//
 		console.log("rewardData", rewardData);
 		const outputClaim = Number(rewardData?.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
+		const outputStaked = Number(stakeData?.topics[3]) / Math.pow(10, tokenStore.memeToken.decimals);
 		showSuccessToast(
-			formatNumber(outputClaim),
+			formatNumber(outputClaim + outputStaked),
 			"Success!",
 			"You just claimed and staked",
 			"Join the next cycle to increase your rewards and win with your clan."
 		);
+		tokenNumber.value = 0;
+		stakeMenu.value = false;
+		await cycleStore.fillCycle(activeCycle.value, true);
+		await walletStore.loadWalletData();
 	} catch (error) {
 		console.error("stakeAndClaim", error);
 	} finally {
@@ -242,8 +247,8 @@ const stateClaimedComp = computed(() => {
 });
 
 const stateStakeClaimComp = computed(() => {
+	console.log("stateStakeClaimComp");
 	let returnState = 0;
-	console.log("tokenNumber.value", tokenNumber.value);
 	if (
 		tokenNumber.value === null ||
 		tokenNumber.value === "" ||