update new contracts

src/components/BloodChart.vue

@@ -1,6 +1,6 @@
 <template>
 	<swiper class="blood-chart-wrapper" :slidesPerView="'auto'" :centeredSlides="false" :spaceBetween="35">
-		<swiper-slide class="blood-chart-element" v-for="coin in props.data.token" :key="coin.name">
+		<swiper-slide class="blood-chart-element" v-for="coin in token" :key="coin.name">
 			<div class="blood-chart-element-header">
 				<div class="blood-chart-coin">
 					<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
@@ -106,6 +106,7 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { getPercentage, compactNumber } from "@/helper/helper.js";
 import { useMemeburnerStore } from "@/stores/memeburner";
 import { Swiper, SwiperSlide } from "swiper/vue";
@@ -128,6 +129,8 @@ function getImageUrl(url) {
 	return new URL(url, import.meta.url).href;
 }
 
+const token = computed(() => props.data?.token);
+
 // const dataPoints = [
 // 	{
 // 		name: "$PEPE",

src/components/ClaimComponent.vue

@@ -6,7 +6,7 @@
 				: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>
+			<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline logo'"></token-logo>
 		</template>
 		<template v-slot:actions>
 			<Transition name="smooth">

src/components/SacrificeToken.vue

@@ -36,7 +36,11 @@
 					}"
 				>
 					<div class="sarcrifice-from-input">
-						<input @input="processChange" v-model="tokenNumber" :placeholder="0" />
+						<input
+							@input="($event) => getRewardsFor($event.target.value)"
+							v-model="tokenNumber"
+							:placeholder="0"
+						/>
 						<div class="sacrifice-logo">
 							<img :src="activeToken.logo" alt="vampir" />
 						</div>
@@ -68,7 +72,7 @@
 							<div class="sacrifice-to-output-rewards">{{ output }}</div>
 						</div>
 						<div class="sacrifice-logo">
-							<img :src="activeToken.vamp.logo" :alt="activeToken.vamp.name" />
+							<img :src="activeToken.vamp?.logo" :alt="activeToken.vamp.name" />
 						</div>
 					</div>
 					<div class="sacrifice-staking-bonus">
@@ -88,7 +92,7 @@
 						<stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component>
 					</div>
 				</div>
-				<div class="sacrificed-info">
+				<div class="sacrificed-info" v-if="state === 4">
 					<div class="left low-mid-text">You can claim your $BLOOD when the cycle is finished.</div>
 					<div class="right">
 						<img src="/assets/img/moon.png" alt="moon" />
@@ -107,28 +111,36 @@
 					</div>
 				</div>
 				<div class="sacrifice-buttons-function-wrapper">
-					<div v-if="walletStore.connected">
+					<template v-if="walletStore.connected">
+						<div class="btn btn-immortal" disabled v-if="state === 0">Enter Amount</div>
 						<div
 							class="btn btn-immortal"
-							v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
-							@click="approvalData = memeburnerStore.sacrificeMeme(tokenNumber)"
+							v-if="
+								activeToken.allowance > 0 &&
+								activeToken.allowance >= tokenNumber &&
+								(state === 1 || state === 4)
+							"
+							@click="sacrificeToken(tokenNumber)"
 						>
-							<font-awesome-icon v-if="memeburnerStore.loading" icon="spinner" spin />
-							Sacrifce {{ activeToken.name }}
+							Sacrifce
 						</div>
 						<div
 							class="btn btn-immortal"
-							v-else
-							@click="approvalData = tokenStore.approveToken(tokenNumber)"
+							v-if="
+								(!activeToken.allowance || activeToken.allowance < tokenNumber) &&
+								(state === 1 || state === 4)
+							"
+							@click="approveToken(tokenNumber)"
 						>
-							<font-awesome-icon v-if="loading" icon="spinner" spin />
-							Approve {{ activeToken.name }}
+							Approve
 						</div>
-					</div>
-					<div v-else>
+						<div class="btn btn-immortal" disabled v-if="state === 2">Sign Transaction</div>
+						<div class="btn btn-immortal" disabled v-if="state === 3">Loading...</div>
+					</template>
+					<template v-else>
 						<!-- <div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div> -->
 						<div class="btn btn-immortal" @click="showPanel = true">Connect</div>
-					</div>
+					</template>
 				</div>
 			</div>
 		</div>
@@ -142,9 +154,12 @@ import { useTokenStore } from "@/stores/tokens";
 import { useMemeburnerStore } from "@/stores/memeburner";
 import StakeComponent from "./StakeComponent.vue";
 import { storeToRefs } from "pinia";
+import { waitForTransaction } from "@wagmi/core";
+
 import Helper from "@/utils/helper.js";
 const isMobile = inject("isMobile");
 const showPanel = inject("showPanel");
+const showModal = inject("showModal");
 
 const walletStore = useWalletStoreV2();
 // const { connected } = storeToRefs(walletStore);
@@ -158,24 +173,71 @@ const props = defineProps({
 	data: Array,
 });
 
-watch(
-	activeToken,
-	() => {
-		tokenNumber.value = null;
-	},
-	{ deep: true }
-);
+// watch(
+// 	activeToken,
+// 	() => {
+// 		tokenNumber.value = null;
+// 	},
+// 	{ deep: true }
+// );
 
-const tokenNumber = ref(0);
+const tokenNumber = ref(null);
 const output = ref(0);
+/**
+ * state 0 enter amount
+ * state 1 rdy to go
+ * state 2 signing
+ * state 3 loading
+ * state 4 sacrificed
+ */
+const state = ref(0);
 const showStakingMenu = ref(false);
 const approvalData = ref(null);
 
-const processChange = Helper.debounce((e) => getRewardsFor(e.target.value));
+// const processChange = Helper.debounce((e) => getRewardsFor(e.target.value));
+
+async function sacrificeToken(amount) {
+	try {
+		state.value = 2;
+		const hash = await memeburnerStore.sacrificeMeme(amount);
+		console.log("hash", hash);
+		state.value = 3;
+		const data = await waitForTransaction({
+			hash: hash,
+		});
+		console.log("data", data);
+		activeToken.value.allowance = await tokenStore.allowance();
+		state.value = 4;
+		showModal.value = true;
+	} catch (error) {
+		state.value = 0;
+		console.error(error);
+		throw new Error(error);
+	}
+}
+async function approveToken(amount) {
+	try {
+		state.value = 2;
+		const hash = await tokenStore.approveToken(amount);
+		state.value = 3;
+		const data = await waitForTransaction({
+			hash: hash,
+		});
+		activeToken.value.allowance = await tokenStore.allowance();
+		console.log("data", data);
+		state.value = 1;
+	} catch (error) {
+		console.error(error);
+		throw new Error(error);
+	} finally {
+		state.value = 1;
+	}
+}
 
 async function getRewardsFor(value) {
 	if (!value || isNaN(value)) {
 		output.value = 0;
+		state.value = 0;
 		return;
 	}
 	const rewardsForResult = await memeburnerStore.getRewardFor(
@@ -184,7 +246,9 @@ async function getRewardsFor(value) {
 	// var test = await memeburnerStore.getRewardsFor(10000);
 	// console.log("test", test);
 	// const rewardsForResult = await tokenStore.getRewardsFor(10000);
+	state.value = 1;
 	output.value = rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
+	tokenStore.activeToken.rewards = output.value;
 	return output.value;
 }
 
@@ -259,10 +323,12 @@ async function addTokens(value) {
             border: 2px dashed var(--grey)
             color: var(--grey)
             border-radius: 16px
-            padding: 16px 24px
+            padding: 16px
             font-size: 16px
             .sacrifice-fees-img
                 flex: 0 0 15%
+                img
+                    height: 46px
             .sacrifice-fees-body
                 flex: 1 1 auto
                 .sacrifice-fees-body-header

src/components/StakeComponentV1.vue

@@ -12,8 +12,15 @@
 		</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">
+				<div class="btn" disabled v-if="roundStore.activeRound === roundStore.currentRound">Stake</div>
+				<div class="btn" v-else @click="openStake">Stake</div>
+				<div
+					v-if="
+						(walletStore.memeToken?.staked === 0 && !stakeonly) ||
+						roundStore.activeRound === roundStore.currentRound
+					"
+					class="btn btn-immortal btn--disabled"
+				>
 					Unstake
 				</div>
 				<div v-else-if="!stakeonly" class="btn btn-immortal" @click="openUnstake">Unstake</div>
@@ -53,7 +60,10 @@
 				</div>
 			</Transition>
 			<!-- todo v-if activeround -->
-			<div class="connected-stake-first-round small-text text-center">
+			<div
+				class="connected-stake-first-round small-text text-center"
+				v-if="roundStore.currentRound === roundStore.activeRound"
+			>
 				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>
@@ -68,6 +78,7 @@ import StakeMenu from "@/components/StakeMenu.vue";
 import TokenNamePrice from "@/components/TokenNamePrice.vue";
 import TokenLogo from "@/components/TokenLogo.vue";
 
+import { useRoundsStore } from "@/stores/rounds";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
@@ -75,6 +86,7 @@ import { useTokenStore } from "@/stores/tokens";
 const walletStore = useWalletStoreV2();
 const tokenStore = useTokenStore();
 const rewardLockerStore = useRewardLockerStore();
+const roundStore = useRoundsStore();
 
 const props = defineProps({
 	stakeonly: {

src/components/TokenClaim.vue

@@ -34,13 +34,16 @@
 			<div class="rewards-total-inner bloodline-border bloodline-border--variant1">
 				<div class="rewards-body">
 					<div class="rewards-coin">$BLOOD</div>
-					<div class="rewards-amount">todo</div>
+					<div class="rewards-amount" v-if="activeRound === currentRound">0</div>
+					<div class="rewards-amount" v-else>todo</div>
 				</div>
 				<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
 			</div>
 		</div>
 		<div class="claim-button">
-			<div v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div>
+			<button v-if="activeRound === currentRound" class="btn btn-immortal" @click="router.push({ name: 'home' })">
+				Sacrifice
+			</button>
 			<div class="stake-buttons" v-else-if="getCurrentRoundData?.rewards_total > 0">
 				<div class="btn btn-immortal" @click="claimRewards">Claim</div>
 				<div class="btn btn-immortal">Stake</div>
@@ -57,6 +60,8 @@ import { inject, ref, onMounted } from "vue";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useRoundsStore } from "@/stores/rounds";
+import { useRouter } from "vue-router";
+
 const clanRewards = ref(0);
 const rewards = ref(0);
 const isMobile = inject("isMobile");
@@ -64,6 +69,8 @@ const rewardLockerStore = useRewardLockerStore();
 const walletStore = useWalletStoreV2();
 const roundStore = useRoundsStore();
 const { address } = storeToRefs(walletStore);
+const router = useRouter();
+
 const { activeRound, currentRound, getCurrentRoundData } = storeToRefs(roundStore);
 
 onMounted(async () => {});