comments + contract update +

smaller design issues

src/components/TokenClaim.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class="claim bloodline-border bloodline-border__thin grey">
-		<div class="claim-headline sub-header">You Cycle Rewards</div>
+		<div class="claim-headline sub-header">Your Cycle Rewards</div>
 
 		<!-- <div class="rewards-wrapper" v-if="!isMobile">
 			<rewards-wrapper
 				title="Sacrafice Reward"
 				coin="$BLOOD"
-				:amount="getCurrentRoundData?.rewards_sacrifice"
+				:amount="getCurrentCycleData?.rewards_sacrifice"
 				image="/assets/img/vampir.png"
 			/>
 			<div class="rewards-divider bloodline-devider">
@@ -15,7 +15,7 @@
 			<rewards-wrapper
 				title="Clan Reward"
 				coin="$BLOOD"
-				:amount="getCurrentRoundData?.rewards_clan"
+				:amount="getCurrentCycleData?.rewards_clan"
 				image="/assets/img/vampir.png"
 			/>
 		</div> -->
@@ -23,46 +23,41 @@
 			<rewards-wrapper
 				title="Sacrafice Reward"
 				coin="$BLOOD"
-				:amount="getCurrentRoundData?.rewards_sacrifice.toFixed(2)"
+				:amount="formatNumber(getCurrentCycleData?.rewards_sacrifice)"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
 				title="Staking Bonus"
 				coin="$BLOOD"
-				:amount="getCurrentRoundData?.rewards_staking.toFixed(2)"
+				:amount="formatNumber(getCurrentCycleData?.rewards_staking)"
 				info="max: 312m"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
 				title="Clan Bonus"
 				coin="$BLOOD"
-				:amount="getCurrentRoundData?.rewards_clan.toFixed(2)"
+				:amount="formatNumber(getCurrentCycleData?.rewards_clan)"
 				image="/assets/img/vampir.png"
 			/>
 		</div>
 		<div class="rewards-total-wrapper">
-			<div class="rewards-total-headline low-mid-text">Total Reward</div>
+			<div class="rewards-total-headline sub-header">Total Reward</div>
 			<div class="rewards-total-inner bloodline-border bloodline-border--variant1">
 				<token-name-price
 					name="$BLOOD"
-					:price="getCurrentRoundData?.rewards_total?.toFixed(5)"
+					:price="formatNumber(getCurrentCycleData?.rewards_total)"
 				></token-name-price>
 				<token-logo img="/assets/img/vampir.png" :alt="'vampire'"></token-logo>
-				<!-- <div class="rewards-coin low-mid-text">$BLOOD</div>
-					<div class="rewards-amount header" v-if="activeRound === currentRound">0</div>
-					<div class="rewards-amount header" v-else>{{ getCurrentRoundData?.rewards_total.toFixed(5) }}</div> -->
-				<!-- </div> -->
-				<!-- <img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" /> -->
 			</div>
 		</div>
 		<div class="claim-button">
 			<template v-if="!walletStore.connected">
 				<button class="btn btn-immortal sub-header" @click="showPanel = true">Connect</button>
 			</template>
-			<template v-else-if="activeRound === currentRound">
+			<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="getCurrentRoundData?.rewards_total > 0">
+			<template v-else-if="getCurrentCycleData?.rewards_total > 0">
 				<Transition name="smooth">
 					<div class="stake-buttons" v-show="!stakeMenu">
 						<div class="btn btn-immortal" v-if="stateClaimedComp === 0" @click="claimRewards">Claim</div>
@@ -78,11 +73,28 @@
 						v-model="tokenNumber"
 						@close="stakeMenu = false"
 						:stake="stake"
-						:amount="getCurrentRoundData?.rewards_total"
+						:amount="getCurrentCycleData?.rewards_total"
 						v-if="stakeMenu"
 					>
 						<template v-slot:body>
-							<div class="btn btn-immortal stake-button" @click="stakeAndClaim">Stake & Claim Rest</div>
+							{{ stateStakeClaimComp }}
+							{{ stateStakeClaim }}
+							<div class="btn btn-immortal stake-button" disabled v-if="stateStakeClaimComp === 0">
+								Enter Amount
+							</div>
+							<div
+								class="btn btn-immortal 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">
+								Sign Transaction
+							</div>
+							<div class="btn btn-immortal stake-button" disabled v-if="stateStakeClaimComp === 3">
+								<loading-component></loading-component>
+							</div>
 							<div
 								class="btn transparent small-text cancel-button text-center"
 								@click="stakeMenu = false"
@@ -107,61 +119,71 @@ import { inject, ref, onMounted, computed } from "vue";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
-import { useRoundsStore } from "@/stores/rounds";
+import { useCycleStore } from "@/stores/cycles";
 import { useRouter } from "vue-router";
 import StakeMenu from "@/components/StakeMenu.vue";
 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 { showSuccessToast } from "@/helper/toast.js";
 
-const clanRewards = ref(0);
-const rewards = ref(0);
-const isMobile = inject("isMobile");
 const showPanel = inject("showPanel");
 const rewardLockerStore = useRewardLockerStore();
 const walletStore = useWalletStoreV2();
 const tokenStore = useTokenStore();
 
-const roundStore = useRoundsStore();
-const { address } = storeToRefs(walletStore);
+const cycleStore = useCycleStore();
 const router = useRouter();
 
-const { activeRound, currentRound, getCurrentRoundData } = storeToRefs(roundStore);
+const { activeCycle, currentCycle, getCurrentCycleData } = storeToRefs(cycleStore);
 
 const stakeMenu = ref(false);
 const stake = ref(null);
 const tokenNumber = ref(null);
 const stateClaim = ref(0);
+const stateStakeClaim = ref(0);
 
 async function stakeAndClaim() {
 	try {
 		console.log(tokenNumber.value);
-		console.log(getCurrentRoundData.value.rewards_total);
-		const coefficient = (10000 * tokenNumber.value) / getCurrentRoundData.value.rewards_total;
-		var hash = await rewardLockerStore.stakeAndClaimRound(coefficient, roundStore.activeRound);
+		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;
 		const data = await waitForTransaction({
 			hash: hash,
 		});
+		console.log("data", data);
+		stateStakeClaim.value = 4;
 		//ClaimedReward (address staker, uint256 reward)
 		var rewardData = data.logs.find((logObject) => {
 			return logObject.topics.find(
-				(topic) => topic === "0xf86340d97020c624010a208b733db95795281fbc45cb6e6a40d161f91fa3e4a0"
+				(topic) => topic === "0xd0813ff03c470dcc7baa9ce36914dc2febdfd276d639deffaac383fd3db42ba3"
 			);
 		});
 		//
 		console.log("rewardData", rewardData);
-		const outputClaim = Number(rewardData.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
+		const outputClaim = Number(rewardData?.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
 		showSuccessToast(
-			outputClaim.toFixed(5),
+			formatNumber(outputClaim),
 			"Success!",
 			"You just claimed and staked",
 			"Join the next cycle to increase your rewards and win with your clan."
 		);
-		const walletStore = useWalletStoreV2();
-		await walletStore.loadWalletData();
 	} catch (error) {
 		console.error("stakeAndClaim", error);
+	} finally {
+		const walletStore = useWalletStoreV2();
+		await walletStore.loadWalletData();
+		stateStakeClaim.value = 1;
 	}
 }
 
@@ -175,9 +197,9 @@ onMounted(async () => {});
 async function claimRewards() {
 	try {
 		stateClaim.value = 2;
-		console.log("getCurrentRoundData", getCurrentRoundData);
-		console.log("activeRound.value", activeRound.value);
-		var hash = await rewardLockerStore.claim([activeRound.value]);
+		console.log("getCurrentCycleData", getCurrentCycleData);
+		console.log("activeCycle.value", activeCycle.value);
+		var hash = await rewardLockerStore.claim([activeCycle.value]);
 		stateClaim.value = 3;
 		console.log("hash", hash);
 		const data = await waitForTransaction({
@@ -195,18 +217,17 @@ async function claimRewards() {
 
 		const outputClaim = Number(rewardData.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
 		showSuccessToast(
-			outputClaim.toFixed(5),
+			formatNumber(outputClaim),
 			"Success!",
 			"You just claimed",
 			"Join the next cycle to increase your rewards and win with your clan."
 		);
 
-		await roundStore.fillRound(activeRound.value, true);
+		await cycleStore.fillCycle(activeCycle.value, true);
 		await walletStore.loadWalletData();
 	} catch (error) {
 		stateClaim.value = 0;
-		console.error(error);
-		throw new Error(error);
+		throw Error(error);
 	}
 }
 
@@ -219,6 +240,26 @@ const stateClaimedComp = computed(() => {
 	}
 	return returnState;
 });
+
+const stateStakeClaimComp = computed(() => {
+	let returnState = 0;
+	console.log("tokenNumber.value", tokenNumber.value);
+	if (
+		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;
+	}
+	return returnState;
+});
 </script>
 
 <style lang="sass">