harb/web-app/src/components/StakeHolder.vue

<template>
		<div class="hold-inner">
			<div class="stake-inner">
				<template v-if="!statCollection.initialized">
					<div>
						<f-loader></f-loader>
					</div>
				</template>

				<template v-else>
					<div class="subheader2">Token Amount</div>
					<FSlider :min="minStakeAmount" :max="maxStakeAmount" v-model="stake.stakingAmountNumber"></FSlider>
					<div class="formular">
						<div class="row row-1">
							<f-input label="Staking Amount" class="staking-amount" v-model="stake.stakingAmountNumber">
								<template v-slot:details>
									<div class="balance">Balance: {{ maxStakeAmount.toFixed(2) }} $KRK</div>
									<div @click="setMaxAmount" class="staking-amount-max">
										<b>Max</b>
									</div>
								</template>
							</f-input>
							<Icon class="stake-arrow" icon="mdi:chevron-triple-right"></Icon>
							<f-input
								label="Owner Slots"
								class="staking-amount"
								disabled
								:modelValue="`${stakeSlots}(${supplyFreeze?.toFixed(4)})`"
							>
								<template #info>
									Slots correspond to a percentage of ownership in the protocol.<br /><br />1,000 Slots =
									1% Ownership<br /><br />When you unstake you get the exact percentage of the current
									$KRK total supply. When the total supply increased since you staked you get more tokens
									back than before.
								</template>
							</f-input>
						</div>
						<div class="row row-2">
							<f-select :items="adjustTaxRate.taxRates" label="Tax" v-model="taxRate">
								<template v-slot:info>
									The yearly tax you have to pay to keep your slots open. The tax is paid when unstaking
									or manually in the dashboard. If someone pays a higher tax they can buy you out.
								</template>
							</f-select>
							<f-input label="Floor Tax" disabled :modelValue="snatchSelection.floorTax">
								<template v-slot:info>
									This is the current minimum tax you have to pay to claim owner slots from other owners.
								</template>
							</f-input>
							<f-input label="Positions Buyout" disabled :modelValue="snatchSelection.snatchablePositions.length">
								<template v-slot:info>
									This shows you the numbers of staking positions you buy out from current owners by
									paying a higher tax. If you get bought out yourself by new owners you get paid out the
									current market value of your position incl. your profits.
								</template>
							</f-input>
						</div>
					</div>
					<f-button size="large" disabled block v-if="stake.state === 'NoBalance'">Insufficient Balance</f-button>
					<f-button size="large" disabled block v-else-if="stake.stakingAmountNumber < minStakeAmount"
						>Stake amount too low</f-button
					>
					<f-button
						size="large"
						disabled
						block
						v-else-if="
							!snatchSelection.openPositionsAvailable && stake.state === 'StakeAble' && snatchSelection.snatchablePositions.length === 0
						"
						>taxRate too low to snatch</f-button
					>
					<f-button
						size="large"
						block
						v-else-if="stake.state === 'StakeAble' && snatchSelection.snatchablePositions.length === 0"
						@click="stakeSnatch"
						>Stake</f-button
					>
					<f-button
						size="large"
						block
						v-else-if="stake.state === 'StakeAble' && snatchSelection.snatchablePositions.length > 0"
						@click="stakeSnatch"
						>Snatch and Stake</f-button
					>
					<f-button size="large" outlined block v-else-if="stake.state === 'SignTransaction'"
						>Sign Transaction ...</f-button
					>
					<f-button size="large" outlined block v-else-if="stake.state === 'Waiting'">Waiting ...</f-button>
				</template>
			</div>
		</div>
</template>

<script setup lang="ts">
import FButton from "@/components/fcomponents/FButton.vue";
import FInput from "@/components/fcomponents/FInput.vue";
import FSelect from "@/components/fcomponents/FSelect.vue";
import FLoader from "@/components/fcomponents/FLoader.vue";
import FSlider from "@/components/fcomponents/FSlider.vue";
import FOutput from "@/components/fcomponents/FOutput.vue";
import { Icon } from "@iconify/vue";
import { formatBigIntDivision, InsertCommaNumber, formatBigNumber, bigInt2Number } from "@/utils/helper";
import { formatUnits } from "viem";
import { loadPositions, usePositions } from "@/composables/usePositions";
import { useStake } from "@/composables/useStake";
import { useClaim } from "@/composables/useClaim";
import { useAdjustTaxRate } from "@/composables/useAdjustTaxRates";
import { useSnatchSelection } from "@/composables/useSnatchSelection";
import { getMinStake } from "@/contracts/harb";
import { useWallet } from "@/composables/useWallet";
import { ref, onMounted, watch, computed, inject, watchEffect } from "vue";
import { useStatCollection, loadStats } from "@/composables/useStatCollection";
import { useRoute } from "vue-router";

const demo = sessionStorage.getItem("demo") === "true";
const route = useRoute();

const adjustTaxRate = useAdjustTaxRate();

const activeTab = ref("stake");
const StakeMenuOpen = ref(false);
const taxRate = ref<number>(1.0);
const loading = ref<boolean>(true);
const stakeSnatchLoading = ref<boolean>(false);
const stake = useStake();
const claim = useClaim();
const wallet = useWallet();
const statCollection = useStatCollection();

const { activePositions } = usePositions();

const minStake = ref(0n);
const stakeSlots = ref();
const supplyFreeze = ref<number>(0);
let debounceTimer: ReturnType<typeof setTimeout>;
watchEffect(() => {
	console.log("supplyFreeze");

	if (!stake.stakingAmount) {
		supplyFreeze.value = 0;
		return;
	}

	clearTimeout(debounceTimer);
	debounceTimer = setTimeout(async () => {
		stake.stakingAmountShares = await assetsToShares(stake.stakingAmount);
		const stakingAmountSharesNumber = bigInt2Number(stake.stakingAmountShares, 18);
		const stakeableSupplyNumber = bigInt2Number(statCollection.stakeableSupply, 18);
		minStake.value = await getMinStake();

		console.log(stakingAmountSharesNumber / stakeableSupplyNumber);
		supplyFreeze.value = stakingAmountSharesNumber / stakeableSupplyNumber;
	}, 500); // Verzögerung von 500ms
});

watchEffect(() => {
	console.log("stakeSlots");
	stakeSlots.value = (supplyFreeze.value * 1000)?.toFixed(2);
});

const tokenIssuance = computed(() => {
	if (statCollection.kraikenTotalSupply === 0n) {
		return 0n;
	}

	return (statCollection.nettoToken7d / statCollection.kraikenTotalSupply) * 100n;
});

async function stakeSnatch() {
	if (snatchSelection.snatchablePositions.value.length === 0) {
		await stake.snatch(stake.stakingAmount, taxRate.value);
	} else {
		const snatchAblePositionsIds = snatchSelection.snatchablePositions.value.map((p: Position) => p.positionId);
		await stake.snatch(stake.stakingAmount, taxRate.value, snatchAblePositionsIds);
	}
	stakeSnatchLoading.value = true;
	await new Promise((resolve) => setTimeout(resolve, 10000));
	await loadPositions();
	await loadStats();
	stakeSnatchLoading.value = false;
}

watch(
	route,
	async (to) => {
		console.log("to", to.hash);
		if (to.hash === "#stake") {
			console.log("StakeMenuOpen", StakeMenuOpen.value);
			StakeMenuOpen.value = true;
		}
	},
	{ flush: "pre", immediate: true, deep: true }
);

onMounted(async () => {
	try {
		minStake.value = await getMinStake();
		stake.stakingAmountNumber = minStakeAmount.value;
	} catch (error) {
		console.error("error", error);
	} finally {
		loading.value = false;
	}
});

const minStakeAmount = computed(() => {
	console.log("minStake", minStake.value);
	return bigInt2Number(minStake.value, 18);
});

const maxStakeAmount = computed(() => {
	if (wallet.balance?.value) {
		console.log("wallet.balance.value", wallet.balance);
		console.log("formatBigIntDivision(wallet.balance.value, 10n ** 18n)", bigInt2Number(wallet.balance.value, 18));
		return bigInt2Number(wallet.balance.value, 18);
	} else {
		return 0;
	}
});

watch(
	minStakeAmount,
	async (newValue) => {
		console.log("newValue", newValue);
		if (newValue > stake.stakingAmountNumber && stake.stakingAmountNumber === 0) {
			stake.stakingAmountNumber = minStakeAmount.value;
		}
	},
	{ immediate: true }
);

function setMaxAmount() {
	console.log("maxStakeAmount.value", maxStakeAmount.value);
	stake.stakingAmountNumber = maxStakeAmount.value;
}

const snatchSelection = useSnatchSelection(demo);
</script>

<style lang="sass">

.hold-inner
    .stake-inner
        display: flex
        flex-direction: column
        gap: 24px
        .formular
            display: flex
            flex-direction: column
            gap: 8px
            .row
                >*
                    flex: 1 1 auto
            .row-1
                gap: 12px
                >:nth-child(2)
                    flex: 0 0 auto
                .staking-amount
                    .f-input--details
                        display: flex
                        gap: 8px
                        justify-content: flex-end
                        color: #9A9898
                        font-size: 14px
                        .staking-amount-max
                            font-weight: 600
                            &:hover, &:active, &:focus
                                cursor: pointer
            .row-2
                justify-content: space-between
                >*
                    flex: 0 0 30%
.stake-arrow
    align-self: center
    font-size: 30px
</style>