ImmortalClanVue/src/components/StakeMenu.vue

<template>
	<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(25n)">25%</div>
				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50n)">50%</div>
				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75n)">75%</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>
			</template>
		</token-input>
		<div class="stake-menu-actions">
			<slot name="body">
				<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
				<div
					class="btn btn-immortal stake-button"
					@click="rewardLockerStore.stakeBloodline(tokenNumber)"
					v-if="props.stake"
				>
					Stake
				</div>
				<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake for Next Cycle</div>
				<div class="btn btn-immortal black" @click="emit('close')">Cancel</div>
			</slot>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";

import TokenInput from "./TokenInput.vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useRewardLockerStore } from "@/stores/rewardlocker";
import { useTokenStore } from "@/stores/tokens";
import { createPermitObject, getSignatureRSV } from "@/helper/blockchain.js";
import { formatNumber } from "@/helper/helper.js";

import { signTypedData } from "@wagmi/core";

const walletStore = useWalletStoreV2();
const rewardLockerStore = useRewardLockerStore();
const tokenStore = useTokenStore();

const props = defineProps({
	stake: Boolean,
	modelValue: [Number, BigInt],
	amount: [Number, BigInt],
});

const emit = defineEmits(["close", "update:modelValue"]);

async function addTokensPercent(value) {
	console.log("value", value);
	console.log("props.amount", props.amount);
	let amount;
	if (props.amount !== undefined || props.amount !== null) {
		//todo function to calculate correct bigInt value (maybe use string and split)
		amount = (BigInt(props.amount) * value) / 100n;
	} else if (props.stake) {
		amount = (walletStore.memeToken.balanceOf * value) / 100n;
	} else {
		amount = (walletStore.memeToken.staked * value) / 100n;
	}
	console.log("amount123", amount);
	amount = amount / 10n ** tokenStore.memeToken.decimals;
	console.log("amount", amount);
	emit("update:modelValue", amount);
}

async function unstakeBloodline() {
	try {
		const fromAddress = walletStore.address;

		var unstakedOrdered = await rewardLockerStore.contract.read.unstakeOrdered([4, fromAddress]);
		//check if states needed here
		var hash = await rewardLockerStore.contract.write.orderUnstake();
		console.log("hash", hash);
		const data = await waitForTransaction({
			hash: hash,
		});
		console.log("data", data);
	} catch (error) {
		console.error("unstakeBloodline", error);
	}
}

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 = BigInt(tokenNumber.value) * 10n ** decimals;
		const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
		const { types, message, domain, primaryType } = createPermitObject(
			fromAddress,
			spender,
			nonce,
			deadline,
			value
		);

		const signature = await signTypedData({
			domain: domain,
			message: message,
			primaryType: primaryType,
			types: types,
		});

		const { r, s, v } = getSignatureRSV(signature);

		var resultStake = await rewardLockerStore.contract.write.stakeToBeSecured([value, deadline, v, r, s]);
	} catch (error) {
		console.error("stakeBloodline", error);
	}
}
</script>

<style lang="sass">
.btn
    &.btn-immortal
        &.stake-button
            font-size: 18px
            text-align: center
.input-balance
    color: var(--grey, #858585)
    margin-left: auto

.stake-menu
    display: flex
    flex-direction: column
    gap: 32px
.stake-menu-actions
    display: flex
    flex-direction: column
    gap: 8px
</style>