update profilepage

2023-09-08 23:05:34 +02:00
parent cd773e16c9
commit dfd208e075
26 changed files with 2155 additions and 600 deletions
@@ -0,0 +1,80 @@
+<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="'todo'"></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>