ImmortalClanVue/src/components/TokenClaim.vue

<template>
	<div class="claim bloodline-border bloodline-border__thin grey">
		<div class="claim-headline sub-header">You Cycle Rewards</div>

		<!-- <div class="rewards-wrapper" v-if="!isMobile">
			<rewards-wrapper
				title="Sacrafice Reward"
				coin="$BLOOD"
				:amount="getCurrentRoundData?.rewards_sacrifice"
				image="/assets/img/vampir.png"
			/>
			<div class="rewards-divider bloodline-devider">
				<font-awesome-icon icon="fa-solid fa-plus" />
			</div>
			<rewards-wrapper
				title="Clan Reward"
				coin="$BLOOD"
				:amount="getCurrentRoundData?.rewards_clan"
				image="/assets/img/vampir.png"
			/>
		</div> -->
		<div class="rewards-list">
			<rewards-wrapper
				title="Sacrafice Reward"
				coin="$BLOOD"
				:amount="getCurrentRoundData?.rewards_sacrifice.toFixed(2)"
				image="/assets/img/vampir.png"
			/>
			<rewards-wrapper
				title="Staking Bonus"
				coin="$BLOOD"
				:amount="getCurrentRoundData?.rewards_staking.toFixed(2)"
				info="max: 312m"
				image="/assets/img/vampir.png"
			/>
			<rewards-wrapper
				title="Clan Bonus"
				coin="$BLOOD"
				:amount="getCurrentRoundData?.rewards_clan.toFixed(2)"
				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-inner bloodline-border bloodline-border--variant1">
				<div class="rewards-body">
					<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 }}</div>
				</div>
				<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
			</div>
		</div>
		<!-- <div class="claim-button">
			<button v-if="activeRound === currentRound" class="btn btn-immortal" @click="router.push({ name: 'home' })">
				Sacrifice
			</button>
			<div class="stake-buttons" v-else-if="getCurrentRoundData?.rewards_total > 0">
				<div class="btn btn-immortal" @click="claimRewards">Claim</div>
				<div class="btn btn-immortal">Stake</div>
			</div>
			<div v-else class="btn btn-immortal btn--disabled">Nothing to claim</div>
		</div> -->
		<div class="claim-button">
			<template v-if="activeRound === currentRound">
				<button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">Sacrifice</button>
			</template>
			<template v-else-if="getCurrentRoundData?.rewards_total > 0">
				<Transition name="smooth">
					<div class="connected-stake-buttons" v-show="!stakeMenu">
						<div class="btn btn-immortal" @click="claimRewards">Claim</div>
						<div class="btn btn-immortal" @click="openStake">Stake</div>
					</div>
				</Transition>
				<Transition name="smooth">
					<stake-menu
						v-model="tokenNumber"
						@close="stakeMenu = false"
						:stake="stake"
						:amount="getCurrentRoundData?.rewards_total"
						v-if="stakeMenu"
					>
						<template v-slot:body>
							<div class="btn btn-immortal stake-button" @click="stakeAndClaim">Stake & Claim Rest</div>
							<div
								class="btn transparent small-text cancel-button text-center"
								@click="stakeMenu = false"
							>
								Cancel
							</div>
						</template>
					</stake-menu>
				</Transition>
			</template>
			<template v-else>
				<div class="btn btn-immortal btn--disabled">Nothing to claim</div>
			</template>
		</div>
	</div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import RewardsWrapper from "@/components/RewardsWrapper.vue";
import { inject, ref, onMounted } from "vue";
import { useRewardLockerStore } from "@/stores/rewardlocker";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useRoundsStore } from "@/stores/rounds";
import { useRouter } from "vue-router";
import StakeMenu from "@/components/StakeMenu.vue";

const clanRewards = ref(0);
const rewards = ref(0);
const isMobile = inject("isMobile");
const rewardLockerStore = useRewardLockerStore();
const walletStore = useWalletStoreV2();
const roundStore = useRoundsStore();
const { address } = storeToRefs(walletStore);
const router = useRouter();

const { activeRound, currentRound, getCurrentRoundData } = storeToRefs(roundStore);

const stakeMenu = ref(false);
const stake = ref(null);
const tokenNumber = ref(null);

async function stakeAndClaim() {
	console.log(tokenNumber.value);
	console.log(getCurrentRoundData.value.rewards_total);
	const coefficient = (10000 * tokenNumber.value) / getCurrentRoundData.value.rewards_total;
	var result = await rewardLockerStore.stakeAndClaimRound(coefficient, roundStore.activeRound);
}

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

onMounted(async () => {});

async function claimRewards() {
	console.log("getCurrentRoundData", getCurrentRoundData);
	console.log("activeRound.value", activeRound.value);
	var result = await rewardLockerStore.claim([activeRound.value]);
	console.log("result", result);
}
</script>

<style lang="sass">
.claim
    display: flex
    padding: 12px
    flex-direction: column
    gap: 16px
    @media (min-width: 992px)
        padding: 32px 40px
    .claim-headline
        text-align: left
    .claim-button
        text-align: center
    .stake-buttons
        display: flex
        text-align: center
        gap: 32px
        div
            flex: 1 1 50%
.rewards-wrapper
    margin-bottom: 16px
.rewards-divider
    text-align: center

.rewards-total-wrapper
    display: flex
    flex-direction: column
    gap: 8px
    .rewards-total-headline
        text-align: left
    .rewards-total-inner
        display: flex
        justify-content: space-between
        text-align: left
        .rewards-left
            display: flex
            flex-direction: column
            gap: 8px
            .name
                font-size: 16px
            .amount
                font-size: 24px
        .rewards-right
            img
                height: 49px
                width: 49px
                border-radius: 50%
</style>