stakemenu

2023-08-14 18:37:11 +02:00
parent 7d33f225ce
commit 23100d9a2a
5 changed files with 240 additions and 0 deletions
@@ -0,0 +1,91 @@
+<template>
+	<div>
+		<token-input v-model="tokenNumber">
+			<template v-slot:message>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(25)">25%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50)">50%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75)">75%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(100)">100%</div>
+			</template>
+		</token-input>
+		<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
+		<div class="btn btn-immortal stake-button" @click="stakeBloodline" v-if="props.stake">Stake</div>
+		<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake</div>
+		<div class="btn btn-immortal black cancel-button" @click="emit('close')">Cancel</div>
+	</div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+import TokenInput from "./TokenInput.vue";
+import { useWalletStoreV2 } from "@/stores/walletV2";
+import { useRewardLockerStore } from "@/stores/rewardlocker";
+import { useTokenStore } from "@/stores/tokens";
+import { createPermitObject, getSignatureRSV } from "@/helper/blockchain.js";
+
+import { signTypedData } from "@wagmi/core";
+
+const walletStore = useWalletStoreV2();
+const rewardLockerStore = useRewardLockerStore();
+const tokenStore = useTokenStore();
+
+const props = defineProps({
+	stake: Boolean,
+});
+
+const emit = defineEmits(["close"]);
+
+const tokenNumber = ref(null);
+async function addTokensPercent(value) {
+	let amount;
+	if (props.stake) {
+		amount = (walletStore.memeToken.balanceOf * value) / 100;
+	} else {
+		amount = (walletStore.memeToken.staked * value) / 100;
+	}
+	tokenNumber.value = amount;
+}
+
+async function unstakeBloodline() {
+	alert("todo");
+}
+
+async function stakeBloodline() {
+	const fromAddress = walletStore.address;
+	const spender = rewardLockerStore.config.contractAddress;
+	const deadline = Date.now() + 20 * 60;
+	const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
+	const value = (tokenNumber.value * Math.pow(10, decimals)).toString();
+	const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
+	console.log("nonce", nonce);
+	const { types, message, domain, primaryType } = createPermitObject(fromAddress, spender, nonce, deadline, value);
+
+	const signature = await signTypedData({
+		domain: domain,
+		message: message,
+		primaryType: primaryType,
+		types: types,
+	});
+
+	const { r, s, v } = getSignatureRSV(signature);
+
+	var resultStake = await rewardLockerStore.contract.write.stakeToBeSecured([value, deadline, v, r, s]);
+
+	console.log("resultStake", resultStake);
+}
+</script>
+
+<style lang="sass">
+.btn
+    &.btn-immortal
+        &.cancel-button
+            font-size: 14px
+            text-align: center
+        &.stake-button
+            font-size: 18px
+            text-align: center
+.input-balance
+    margin: 8px 0
+    color: var(--grey, #858585)
+</style>
@@ -0,0 +1,53 @@
+<template>
+	<div class="token-input">
+		<div class="sarcrifice-from-input">
+			<input
+				@input="emit('update:modelValue', $event.target.value)"
+				v-model="props.modelValue"
+				:placeholder="0"
+			/>
+			<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
+		</div>
+		<div class="value-adder">
+			<slot class="value-adder" name="message"></slot>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	modelValue: Number,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="sass">
+.sarcrifice-from-input
+    display: flex
+    margin-bottom: 8px
+    // height: 60px
+    input
+        width: 100%
+        height: 45px
+        font-size: 24px
+        border-radius: 16px
+        padding: 0 16px
+        @media (min-width: 992px)
+            font-size: 32px
+            height: auto
+.value-adder
+    display: flex
+    gap: 8px
+    .stake-adder-step
+        padding: 4px 16px
+        color: var(--black)
+        font-size: 14px
+        border-width: 1px
+        border-color: transparent
+        border-style: solid
+        &:hover,&:active, &:focus
+            color: var(--white)
+            border-color: var(--white)
+            background-color: var(--black)
+</style>
@@ -0,0 +1,24 @@
+<template>
+	<div class="token-logo">
+		<img :src="props.img" :alt="props.alt" />
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	img: String,
+	alt: Number,
+});
+</script>
+
+<style lang="sass">
+.token-logo
+    img
+        width: 45px
+        height: 45px
+        border-radius: 50%
+        pointer-events: none
+        @media (min-width: 992px)
+            height: 83px
+            width: auto
+</style>