107 lines
3.1 KiB
Vue
107 lines
3.1 KiB
Vue
<template>
|
|
<stake-component>
|
|
<template v-slot:headline> Unclaimed </template>
|
|
<template v-slot:body>
|
|
<token-name-price
|
|
:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
|
|
:price="walletStore.memeToken?.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.memeToken?.unclaimedRewards > 0">
|
|
<Transition name="smooth">
|
|
<div class="connected-stake-buttons" v-show="!stakeMenu">
|
|
<div class="btn btn-immortal mid-mid-text" @click="rewardLockerStore.claimAll">Claim</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.memeToken?.unclaimedRewards"
|
|
:stake="stake"
|
|
v-if="stakeMenu"
|
|
>
|
|
<template v-slot:body>
|
|
<div class="btn btn-immortal stake-button" @click="stakeAndClaimAllRounds">
|
|
Stake & Claim Rest
|
|
</div>
|
|
<div
|
|
class="btn transparent small-text cancel-button text-center"
|
|
@click="stakeMenu = false"
|
|
>
|
|
Cancel
|
|
</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>
|
|
</stake-component>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import StakeComponent from "@/components/StakeComponent.vue";
|
|
import StakeMenu from "@/components/StakeMenu.vue";
|
|
import TokenNamePrice from "@/components/TokenNamePrice.vue";
|
|
import TokenLogo from "@/components/TokenLogo.vue";
|
|
|
|
import { useWalletStoreV2 } from "@/stores/walletV2";
|
|
import { useTokenStore } from "@/stores/tokens";
|
|
import { useRewardLockerStore } from "@/stores/rewardlocker";
|
|
import { useRouter } from "vue-router";
|
|
|
|
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);
|
|
|
|
function openStake() {
|
|
stake.value = true;
|
|
stakeMenu.value = true;
|
|
}
|
|
|
|
function openUnstake() {
|
|
stake.value = false;
|
|
stakeMenu.value = true;
|
|
}
|
|
|
|
async function stakeAndClaimAllRounds() {
|
|
console.log("tokenNumber.value", tokenNumber.value);
|
|
const coefficient = (10000 * tokenNumber.value) / walletStore.memeToken?.unclaimedRewards;
|
|
var result = await rewardLockerStore.stakeAndClaimAllRounds(coefficient);
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
// .smooth-enter-active, .smooth-leave-active
|
|
// transition: opacity 0.1s
|
|
|
|
// .smooth-enter, .smooth-leave-to
|
|
// height: 0
|
|
</style>
|