update cycle

src/components/BloodChart.vue

@@ -1,5 +1,21 @@
 <template>
-	<swiper class="blood-chart-wrapper" :slidesPerView="'auto'" :centeredSlides="false" :spaceBetween="35">
+	<div class="blood-chart-wrapper">
+		<div class="blood-arrow left">
+			<img
+				class="swiper-arrow"
+				src="/assets/img/blood-arrow-left.png"
+				alt="left-arrow"
+				@click="swiperInstance.slidePrev()"
+			/>
+		</div>
+		<swiper
+			class="blood-chart"
+			:slidesPerView="3"
+			:centeredSlides="false"
+			:initial-slide="0"
+			:spaceBetween="35"
+			@swiper="onSwiper"
+		>
 			<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">
@@ -39,7 +55,9 @@
 								<div><span class="dot"></span></div>
 								<div><span class="dot"></span></div>
 							</div>
-						<div class="blood-chart-bar-percentage">{{ getPercentage(coin.amount, props.data.goal) }}%</div>
+							<div class="blood-chart-bar-percentage">
+								{{ getPercentage(coin.amount, props.data.goal) }}%
+							</div>
 						</div>
 					</div>
 				</div>
@@ -51,70 +69,30 @@
 					<div class="blood-chart-coin">$BLOOD</div>
 				</div>
 			</swiper-slide>
+
+			<!-- <button @click="swiperInstance.slidePrev()">left</button>
+		<button @click="swiperInstance.slideNext()">left</button> -->
 		</swiper>
-	<!-- <div class="blood-chart-wrapper" v-if="props.data">
-		<div class="blood-chart-element" v-for="coin in props.data.token" :key="coin.name">
-			<div class="blood-chart-element-header">
-				<div class="blood-chart-coin">
-					<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
-				</div>
-				<div class="blood-chart-coin-title">{{ coin.name }}</div>
-			</div>
-			<div class="blood-chart-element-body">
-				<div class="blood-chart-bar-wrapper">
-					<svg
-						class="waves"
-						xmlns="http://www.w3.org/2000/svg"
-						xmlns:xlink="http://www.w3.org/1999/xlink"
-						viewBox="0 24 150 28"
-						preserveAspectRatio="none"
-						shape-rendering="auto"
-					>
-						<defs>
-							<path
-								id="gentle-wave"
-								d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+		<div class="blood-arrow right">
+			<img
+				class="swiper-arrow"
+				src="/assets/img/blood-arrow-right.png"
+				alt="left-arrow"
+				@click="swiperInstance.slideNext()"
 			/>
-						</defs>
-						<g class="parallax">
-							<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
-							<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
-							<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
-							<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
-						</g>
-					</svg>
-					<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
-						<div class="wrapper">
-							<div><span class="dot"></span></div>
-							<div><span class="dot"></span></div>
-							<div><span class="dot"></span></div>
-							<div><span class="dot"></span></div>
-							<div><span class="dot"></span></div>
-							<div><span class="dot"></span></div>
-						</div>
-						<div class="blood-chart-bar-percentage">{{ getPercentage(coin.amount, props.data.goal) }}%</div>
 		</div>
 	</div>
-			</div>
-			<div class="blood-chart-element-footer">
-				<div class="blood-chart-amount">
-					{{ compactNumber(coin.amount) }}
-				</div>
-				<div class="blood-chart-coin">$BLOOD</div>
-			</div>
-		</div>
-	</div> -->
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { getPercentage, compactNumber } from "@/helper/helper.js";
 import { useMemeburnerStore } from "@/stores/memeburner";
 import { Swiper, SwiperSlide } from "swiper/vue";
 
 // Import Swiper styles
 import "swiper/css";
-
+import "swiper/css/navigation";
 import "swiper/css/pagination";
 
 // import required modules
@@ -126,6 +104,12 @@ const props = defineProps({
 
 console.log(props.data);
 
+const swiperInstance = ref();
+
+function onSwiper(swiper) {
+	swiperInstance.value = swiper;
+}
+
 function getImageUrl(url) {
 	return new URL(url, import.meta.url).href;
 }
@@ -153,6 +137,12 @@ const token = computed(() => props.data?.token);
 
 <style lang="sass">
 .blood-chart-wrapper
+    // margin-top: 56px
+    display: flex
+    justify-content: center
+    // margin-bottom: 80px
+    position: relative
+.blood-chart
     height: 750px
     width: 100%
     justify-content: space-around
@@ -216,4 +206,24 @@ const token = computed(() => props.data?.token);
 
 .swiper-slide
     width: 80px
+
+.swiper-test
+    display: flex
+    flex-direction: column
+
+
+.blood-arrow
+    min-width: 30px
+    &.left, &.right
+        img
+            height: 50px
+            position: absolute
+            top: 50%
+            z-index: 0
+    &.right
+        img
+            right: -5px
+    &.left
+        img
+            left: -5px
 </style>

src/components/ClaimComponent.vue

@@ -16,9 +16,17 @@
 				</div>
 			</Transition>
 			<Transition name="smooth">
-				<stake-menu v-model="tokenNumber" @close="stakeMenu = false" :stake="stake" v-if="stakeMenu">
+				<stake-menu
+					v-model="tokenNumber"
+					@close="stakeMenu = false"
+					:amount="walletStore.memeToken?.unclaimedRewards"
+					: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 btn-immortal stake-button" @click="stakeAndClaimAllRounds">
+							Stake & Claim Rest
+						</div>
 						<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
 							Cancel
 						</div>
@@ -69,6 +77,12 @@ function openUnstake() {
 	stake.value = false;
 	stakeMenu.value = true;
 }
+
+async function stakeAndClaimAllRounds() {
+	console.log("tokenNumber.value", tokenNumber.value);
+	const coefficient = (10000 * tokenNumber.value) / walletStore.memeToken?.unclaimedRewards;
+	var result = await rewardLockerStore.stakeAndClaimAllRounds(coefficient);
+}
 </script>
 
 <style lang="sass">

src/components/ConnectWallet.vue

@@ -69,6 +69,7 @@
 				</div>
 			</template>
 		</stake-component> -->
+		<stake-component-v1></stake-component-v1>
 	</div>
 </template>
 
@@ -81,6 +82,8 @@ import TokenNamePrice from "./TokenNamePrice.vue";
 import TokenLogo from "./TokenLogo.vue";
 import StakeComponent from "./StakeComponent.vue";
 import TokenInput from "./TokenInput.vue";
+import StakeComponentV1 from "@/components/StakeComponentV1.vue";
+
 import { getAddressShortName, getblocky } from "@/helper/helper.js";
 import { useRoute, useRouter } from "vue-router";
 

src/components/SlideoutPanel.vue

@@ -58,6 +58,8 @@ function testClick(e) {
             width: 100%
             height: 100%
             padding: 24px 24px 16px 24px
+            overflow: scroll
+            height: calc( 100svh - 82px )
             @media (min-width: 992px)
                 width: 300px
             .slideout-icon

src/components/StakeComponentV1.vue

@@ -12,13 +12,10 @@
 		</template>
 		<template v-slot:actions>
 			<div class="connected-stake-buttons" v-if="!stakeMenu">
-				<div class="btn" disabled v-if="roundStore.activeRound === roundStore.currentRound">Stake</div>
-				<div class="btn" v-else @click="openStake">Stake</div>
+				<div class="btn btn-immortal" disabled v-if="roundStore.currentRound === 1">Stake</div>
+				<div class="btn btn-immortal" v-else @click="openStake">Stake</div>
 				<div
-					v-if="
-						(walletStore.memeToken?.staked === 0 && !stakeonly) ||
-						roundStore.activeRound === roundStore.currentRound
-					"
+					v-if="(walletStore.memeToken?.staked === 0 && !stakeonly) || roundStore.currentRound === 1"
 					class="btn btn-immortal btn--disabled"
 				>
 					Unstake

src/components/StakeMenu.vue

@@ -53,13 +53,18 @@ const tokenStore = useTokenStore();
 const props = defineProps({
 	stake: Boolean,
 	modelValue: Number,
+	amount: Number,
 });
 
 const emit = defineEmits(["close", "update:modelValue"]);
 
 async function addTokensPercent(value) {
+	console.log("value", value);
+	console.log(walletStore.memeToken.balanceOf);
 	let amount;
-	if (props.stake) {
+	if (props.amount !== undefined || props.amount !== null) {
+		amount = (props.amount * value) / 100;
+	} else if (props.stake) {
 		amount = (walletStore.memeToken.balanceOf * value) / 100;
 	} else {
 		amount = (walletStore.memeToken.staked * value) / 100;

src/components/TokenClaim.vue

@@ -51,7 +51,7 @@
 				<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
 			</div>
 		</div>
-		<div class="claim-button">
+		<!-- <div class="claim-button">
 			<button v-if="activeRound === currentRound" class="btn btn-immortal" @click="router.push({ name: 'home' })">
 				Sacrifice
 			</button>
@@ -60,6 +60,41 @@
 				<div class="btn btn-immortal">Stake</div>
 			</div>
 			<div v-else class="btn btn-immortal btn--disabled">Nothing to claim</div>
+		</div> -->
+		<div class="claim-button">
+			<template v-if="activeRound === currentRound">
+				<button class="btn btn-immortal" @click="router.push({ name: 'home' })">Sacrifice</button>
+			</template>
+			<template v-else-if="getCurrentRoundData?.rewards_total > 0">
+				<Transition name="smooth">
+					<div class="connected-stake-buttons" v-show="!stakeMenu">
+						<div class="btn btn-immortal" @click="claimRewards">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"
+						:amount="getCurrentRoundData?.rewards_total"
+						v-if="stakeMenu"
+					>
+						<template v-slot:body>
+							<div class="btn btn-immortal stake-button" @click="stakeAndClaim">Stake & Claim Rest</div>
+							<div
+								class="btn transparent small-text cancel-button text-center"
+								@click="stakeMenu = false"
+							>
+								Cancel
+							</div>
+						</template>
+					</stake-menu>
+				</Transition>
+			</template>
+			<template v-else>
+				<div class="btn btn-immortal btn--disabled">Nothing to claim</div>
+			</template>
 		</div>
 	</div>
 </template>
@@ -72,6 +107,7 @@ import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useRoundsStore } from "@/stores/rounds";
 import { useRouter } from "vue-router";
+import StakeMenu from "@/components/StakeMenu.vue";
 
 const clanRewards = ref(0);
 const rewards = ref(0);
@@ -84,6 +120,22 @@ const router = useRouter();
 
 const { activeRound, currentRound, getCurrentRoundData } = storeToRefs(roundStore);
 
+const stakeMenu = ref(false);
+const stake = ref(null);
+const tokenNumber = ref(null);
+
+async function stakeAndClaim() {
+	console.log(tokenNumber.value);
+	console.log(getCurrentRoundData.value.rewards_total);
+	const coefficient = (10000 * tokenNumber.value) / getCurrentRoundData.value.rewards_total;
+	var result = await rewardLockerStore.stakeAndClaimRound(coefficient, roundStore.activeRound);
+}
+
+function openStake() {
+	stake.value = true;
+	stakeMenu.value = true;
+}
+
 onMounted(async () => {});
 
 async function claimRewards() {

src/helper/helper.js

@@ -4,9 +4,6 @@ export function getImageUrl(url) {
 }
 
 export function getPercentage(amount, goal) {
-    console.log("amount", amount);
-    console.log("goal", goal);
-
     return ((Number(amount) / Number(goal)) * 100).toFixed(2);
 }
 

src/stores/rewardlocker.js

@@ -62,9 +62,6 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		async claim(round) {
 			console.log("claim");
 			const walletStore = useWalletStoreV2();
-			// return await this.contract.methods.claim(round).call();
-			console.log(this.contract.methods.claim(round));
-			// return await this.contract.methods.claim(round).send({from: walletStore.address, to: this.contractAddress});
 			return await this.contract.write.claim([round]);
 		},
 		async claimAll() {
@@ -110,7 +107,13 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			const value = (tokenNumber * 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 { types, message, domain, primaryType } = createPermitObject(
+				fromAddress,
+				spender,
+				nonce,
+				deadline,
+				value
+			);
 
 			const signature = await signTypedData({
 				domain: domain,
@@ -128,6 +131,30 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 				hash: hash,
 			});
 			console.log("data", data);
-        }
+		},
+		async stakeAndClaimRound(stakeCoefficient, round) {
+			// stakeCoefficient 25% = 2500, 50% = 5000
+			const tokenStore = useTokenStore();
+			const addresses = tokenStore.sacrificeToken.map((obj) => obj.contractAddress);
+			const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, [round], addresses]);
+			const data = await waitForTransaction({
+				hash: hash,
+            });
+            const walletStore = useWalletStoreV2();
+			await walletStore.loadWalletData();
+			// todo reload roundData and wallet data
+		},
+        async stakeAndClaimAllRounds(stakeCoefficient) {
+            console.log("stakeAndClaimAllRounds");
+			const tokenStore = useTokenStore();
+			const roundsStore = useRoundsStore();
+			const rounds = await roundsStore.getFinshedRoundNumbers();
+            const addresses = tokenStore.sacrificeToken.map((obj) => obj.contractAddress);
+            console.log({ stakeCoefficient, rounds, addresses });
+			const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, rounds, addresses]);
+			// todo reload roundData and wallet data
+			const walletStore = useWalletStoreV2();
+            await walletStore.loadWalletData();
+		},
 	},
 });

src/stores/rounds.js

@@ -15,7 +15,6 @@ export const useRoundsStore = defineStore("rounds", {
 	getters: {
 		getRoundWinner() {
 			const goal = this.getCurrentRoundData?.goal;
-			console.log("goal", goal);
 			if (!goal) {
 				return;
 			}
@@ -62,8 +61,9 @@ export const useRoundsStore = defineStore("rounds", {
 				if (!this.rounds[index]) {
 					this.rounds[index] = {};
                 }
-				this.rounds[index].round = index + 1;
-				this.rounds[index].rewards_total = element.result;
+                console.log("vor Fehler");
+				// this.rounds[index].round = index + 1;
+				// this.rounds[index].rewards_total = element.result;
 			}
 		},
 		async updateCurrentRound(sacrificedToken) {
@@ -97,7 +97,6 @@ export const useRoundsStore = defineStore("rounds", {
 				}
 
 				var goal = await memeBurnerStore.getGoal(roundNumber);
-				console.log("goal", goal);
 				var tokenArray = [];
 				var rewards_clan = 0;
                 var rewards_sacrifice = 0;
@@ -106,11 +105,11 @@ export const useRoundsStore = defineStore("rounds", {
 				for (let index = 0; index < data.length; index++) {
 					var tokenData = {};
 					const token = tokenStore.token[index];
-					var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(
+					var coefficent = await rewardLockerStore.getSacrificedTokenCoefficient(
 						roundNumber,
 						token.contractAddress
                     );
-                    console.log("testcoef", testcoef);
+                    console.log("coefficent", coefficent);
 
 					tokenData.name = token.name;
 					tokenData.contractAddress = token.contractAddress;
@@ -128,7 +127,7 @@ export const useRoundsStore = defineStore("rounds", {
                         const sacrificeClanReward = Number(rewardData[index].result[1]);
                         console.log("stakeReward", stakeReward);
                         console.log("sacrificeClanReward", sacrificeClanReward);
-                        const clanwin = (Number(testcoef) / 10000 - 1) * sacrificeClanReward;
+                        const clanwin = (Number(coefficent) / 10000 - 1) * sacrificeClanReward;
                         console.log("clanwin", clanwin);
 						const sacrificeRewards = Number(sacrificeClanReward) - clanwin;
                         console.log("sacrificeRewards", sacrificeRewards);

src/views/CycleView.vue

@@ -95,12 +95,10 @@
 				<div class="bloodline-container" v-else>
 					<div class="bloodline-border purple">Get up to +100% Clan Bonus <br />on your sacrifice.</div>
 				</div>
-				<div class="blood-chart">
 				<blood-chart :data="roundsStore.rounds[roundsStore.activeRound]"></blood-chart>
 			</div>
 		</div>
 	</div>
-	</div>
 </template>
 
 <script setup>
@@ -267,4 +265,10 @@ function timeBetweenDates(expirationTimestamp) {
                     opacity: 0.3
         .cycle-winner-name
             font-size: 16px
+
+
+.bloodline-clan
+    display: flex
+    flex-direction: column
+    gap: 16px
 </style>

src/views/HomeView.vue

@@ -63,12 +63,6 @@ const isMobile = inject("isMobile");
 </template>
 
 <style lang="sass">
-.blood-chart
-    margin-top: 56px
-    display: flex
-    justify-content: center
-    margin-bottom: 80px
-
 .header-text
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
     font-size: 32px

src/views/ProfileView.vue

@@ -219,7 +219,8 @@ onMounted(async () => {
 		console.log("roundsStore.currentRound", roundsStore.currentRound);
 		roundsStore.activeRound = roundsStore.currentRound;
 	}
-	await roundsStore.loadRewardsRounds();
+	//brauche ich das?
+	// await roundsStore.loadRewardsRounds();
 	console.log("roundsStore.rounds", roundsStore.rounds);
 });