ImmortalClanVue/src/components/ClaimComponent.vue

<template>
	<card-component>
		<template v-slot:headline> Unclaimed </template>
		<template v-slot:body>
			<token-name-price
				:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
				: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.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>
						<div class="btn btn-immortal mid-mid-text" disabled v-else-if="stateStake === 2">
							Sign Transaction
						</div>
						<div class="btn btn-immortal stake-button" disabled v-else-if="stateStake === 3">
							<loading-component></loading-component>
						</div>
						<div class="btn btn-immortal mid-mid-text" @click="openStake">Stake</div>
					</div>
				</Transition>
				<Transition name="smooth">
					<stake-menu
						v-model="tokenNumber"
						@close="stakeMenu = false"
						:amount="walletStore.unclaimedRewards"
						:stake="stake"
						v-if="stakeMenu"
					>
						<template v-slot:body>
							<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 0">
								Enter Amount
							</div>
							<div
								class="btn btn-immortal stake-button"
								v-else-if="stateClaimComp === 1"
								@click="stakeAndClaimAllCycles"
							>
								Stake & Claim Rest
							</div>
							<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 2">
								Sign Transaction
							</div>
							<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 3">
								<loading-component></loading-component>
							</div>
							<div
								class="btn transparent small-text cancel-button text-center"
								@click="stakeMenu = false"
							>
								Cancel
							</div>
						</template>
						<template v-slot:message-end>
							<div class="input-balance">
								Balance:
								{{ formatNumber(walletStore.unclaimedRewards) }}
							</div>
						</template>
					</stake-menu>
				</Transition>
				<div class="connected-stake-first-round small-text text-center">
					You can claim, once the cycle is over.
				</div>
			</template>
			<template v-else>
				<div class="btn btn-immortal mid-mid-text text-center" @click="router.push({ name: 'home' })">
					Go to Sacrifice
				</div>
				<div class="small-text text-center">Sacrifice to earn $BLOOD</div>
			</template>
		</template>
	</card-component>
</template>

<script setup>
import { ref, computed } from "vue";
import CardComponent from "@/components/CardComponent.vue";
import StakeMenu from "@/components/StakeMenu.vue";
import TokenNamePrice from "@/components/TokenNamePrice.vue";
import TokenLogo from "@/components/TokenLogo.vue";
import { waitForTransaction } from "@wagmi/core";
import LoadingComponent from "@/components/LoadingComponent.vue";
import StakeSuccessToast from "@/components/toasts/StakeSuccessToast.vue";

import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import { useRewardLockerStore } from "@/stores/rewardlocker";
import { useRouter } from "vue-router";
import { useToast } from "vue-toastification";
import { formatNumber } from "@/helper/helper.js";
import { showSuccessToast } from "@/helper/toast.js";

const toast = useToast();
const rewardLockerStore = useRewardLockerStore();
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const router = useRouter();

const props = defineProps({
	stakeonly: {
		type: Boolean,
		required: false,
		default: false,
	},
});

const stakeMenu = ref(false);
const stake = ref(null);
const tokenNumber = ref(null);
/**
 * state 0 enter amount
 * state 1 rdy to go
 * state 2 signing
 * state 3 loading
 * state 4 staked
 */
const state = ref(0);
const stateClaim = ref(0);

function openStake() {
	stake.value = true;
	stakeMenu.value = true;
}

async function stakeAndClaimAllCycles() {
	try {
		const unclaimedRewards = walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
		stateClaim.value = 2;
		console.log("unclaimedRewards", unclaimedRewards);
		const coefficient = BigInt(10000 * tokenNumber.value) / unclaimedRewards;
		var hash = await rewardLockerStore.stakeAndClaimAllCycles(coefficient);
		stateClaim.value = 3;
		const data = await waitForTransaction({
			hash: hash,
		});
		stateClaim.value = 4;
		var rewardData = data.logs.find((logObject) => {
			return logObject.topics.find(
				(topic) => topic === "0xd0813ff03c470dcc7baa9ce36914dc2febdfd276d639deffaac383fd3db42ba3"
			);
		});
		//
		console.log("rewardData", rewardData);
		//ClaimedReward (address staker, uint256 reward)
		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
		showSuccessToast(
			formatNumber(outputClaim),
			"Success!",
			"You just claimed and staked",
			"Join the next cycle to increase your rewards and win with your clan"
		);
		await walletStore.loadWalletData();
	} catch (error) {
		stateClaim.value = 0;
		console.error(error);
		throw new Error(error);
	}
}

async function claimAll() {
	try {
		state.value = 2;
		const hash = await rewardLockerStore.claimAll();
		state.value = 3;
		const data = await waitForTransaction({
			hash: hash,
		});
		var rewardData = data.logs.find((logObject) => {
			return logObject.topics.find(
				(topic) => topic === "0xd0813ff03c470dcc7baa9ce36914dc2febdfd276d639deffaac383fd3db42ba3"
			);
		});
		//
		console.log("rewardData", rewardData);
		//ClaimedReward (address staker, uint256 reward)
		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
		showSuccessToast(
			formatNumber(outputClaim),
			"Success!",
			"You just claimed",
			"Join the next cycle to increase your rewards and win with your clan."
		);
		await walletStore.loadWalletData();
	} catch (error) {
		state.value = 0;
		console.error(error);
		throw new Error(error);
	}
}

const stateStake = computed(() => {
	let returnState = 0;
	if (state.value === 2) {
		returnState = 2;
	} else if (state.value === 3) {
		returnState = 3;
	}
	return returnState;
});

const stateClaimComp = 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 (stateClaim.value === 2) {
		returnState = 2;
	} else if (stateClaim.value === 3) {
		returnState = 3;
	} else if (tokenNumber.value !== null || tokenNumber.value !== "" || tokenNumber.value > 0) {
		returnState = 1;
	}
	return returnState;
});
</script>

<style lang="sass"></style>