81 lines
2.4 KiB
Vue
81 lines
2.4 KiB
Vue
<template>
|
|
<stake-component v-if="walletStore.memeToken?.unclaimedRewards > 0">
|
|
<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>
|
|
<Transition name="smooth">
|
|
<div class="connected-stake-buttons" v-show="!stakeMenu">
|
|
<div class="btn btn-immortal" @click="rewardLockerStore.claimAll">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" v-if="stakeMenu">
|
|
<template v-slot:body>
|
|
<div class="btn btn-immortal stake-button" @click="stakeBloodline">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>
|
|
</stake-component>
|
|
<stake-component dense v-else>
|
|
<div class="text-center">All Claimed</div>
|
|
</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";
|
|
|
|
const rewardLockerStore = useRewardLockerStore();
|
|
const walletStore = useWalletStoreV2();
|
|
const tokenStore = useTokenStore();
|
|
|
|
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;
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
// .smooth-enter-active, .smooth-leave-active
|
|
// transition: opacity 0.1s
|
|
|
|
// .smooth-enter, .smooth-leave-to
|
|
// height: 0
|
|
</style>
|