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,122 @@
+<template>
+	<stake-component>
+		<template v-slot:headline> Staked </template>
+		<template v-slot:subheadline> Stake for a 25% bonus on your sacrifice. Upper limit is your stake. </template>
+		<template v-slot:body>
+			<token-name-price
+				:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
+				:price="walletStore.memeToken?.staked"
+			></token-name-price>
+			<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
+			<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price>
+		</template>
+		<template v-slot:actions>
+			<div class="connected-stake-buttons" v-if="!stakeMenu">
+				<div class="btn btn-immortal" @click="openStake">Stake</div>
+				<div v-if="walletStore.memeToken?.staked === 0 && !stakeonly" class="btn btn-immortal btn--disabled">
+					Unstake
+				</div>
+				<div v-else-if="!stakeonly" class="btn btn-immortal" @click="openUnstake">Unstake</div>
+			</div>
+			<Transition name="smooth">
+				<stake-menu
+					v-model="tokenNumber"
+					@close="stakeMenu = false"
+					:stake="stake"
+					v-if="stakeMenu & !unstakeMenu"
+				>
+					<template v-slot:body>
+						<div
+							class="btn btn-immortal stake-button"
+							@click="rewardLockerStore.stakeBloodline(tokenNumber)"
+						>
+							Stake
+						</div>
+						<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
+							Cancel
+						</div>
+					</template>
+				</stake-menu>
+				<div class="unstake-menu" v-else-if="stakeMenu & unstakeMenu">
+					<div class="low-mid-text text-center">
+						To prevent users from farming rewards you can claim your stake next cycle.
+					</div>
+					<div class="unstake-menu-actions">
+						<div class="btn btn-immortal stake-button" v-if="!loading" @click="orderUnstake">
+							Unstake Next Cycle
+						</div>
+						<div class="btn btn--disabled" v-else>Sign Transaction</div>
+						<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
+							Cancel
+						</div>
+					</div>
+				</div>
+			</Transition>
+			<!-- todo v-if activeround -->
+			<div class="connected-stake-first-round small-text text-center">
+				No $BLOOD on the market. Staking is activated after the first cycle is finished.
+			</div>
+			<div class="low-mid-text text-center">You can claim your stake next cycle.</div>
+		</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 { useRewardLockerStore } from "@/stores/rewardlocker";
+import { useWalletStoreV2 } from "@/stores/walletV2";
+import { useTokenStore } from "@/stores/tokens";
+
+const walletStore = useWalletStoreV2();
+const tokenStore = useTokenStore();
+const rewardLockerStore = useRewardLockerStore();
+
+const props = defineProps({
+	stakeonly: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
+});
+
+const stakeMenu = ref(false);
+const unstakeMenu = ref(false);
+const stake = ref(null);
+const tokenNumber = ref(null);
+const loading = ref(false);
+
+function openStake() {
+	stake.value = true;
+	unstakeMenu.value = false;
+	stakeMenu.value = true;
+}
+
+function openUnstake() {
+	stake.value = false;
+	unstakeMenu.value = true;
+	stakeMenu.value = true;
+}
+
+async function orderUnstake() {
+	loading.value = true;
+	var result = await rewardLockerStore.orderUnstake();
+	console.log("orderUnstake", result);
+	loading.value = false;
+}
+</script>
+
+<style lang="sass">
+.unstake-menu
+    display: flex
+    flex-direction: column
+    gap: 16px
+    .unstake-menu-actions
+        display: flex
+        flex-direction: column
+        gap: 8px
+</style>