From 167ad941bc19e6fc466484e94e50495d945cece2 Mon Sep 17 00:00:00 2001
From: EmberSpirit <EmberSpirit007@proton.me>
Date: Thu, 19 Oct 2023 20:30:27 +0200
Subject: [PATCH] update m issues + e issues

---
 public/assets/img/winnerCrown.png            | Bin 0 -> 3693 bytes
 src/App.vue                                  |  10 +-
 src/components/BloodChart.vue                |  21 +++-
 src/components/CardComponent.vue             |   1 -
 src/components/ClaimComponent.vue            |  10 ++
 src/components/ConnectWallet.vue             |   1 -
 src/components/SacrificeToken.vue            |   1 -
 src/components/StakeComponentV1.vue          | 100 +++++++++----------
 src/components/StakeMenu.vue                 |   8 +-
 src/components/TokenClaim.vue                |  17 +++-
 src/components/TokenNamePrice.vue            |   9 +-
 src/components/toasts/StakeSuccessToast.vue  |   2 +-
 src/components/toasts/SwitchNetworkToast.vue |  86 ++++++++++++++++
 src/helper/helper.js                         |  27 ++---
 src/main.js                                  |  50 +++++++++-
 src/stores/cycles.js                         |  29 ++++--
 src/stores/rewardlocker.js                   |   4 +-
 src/views/CycleView.vue                      |  32 ++++--
 18 files changed, 293 insertions(+), 115 deletions(-)
 create mode 100644 public/assets/img/winnerCrown.png
 create mode 100644 src/components/toasts/SwitchNetworkToast.vue

diff --git a/public/assets/img/winnerCrown.png b/public/assets/img/winnerCrown.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa4ba7c4a5e016021327b1fd69c3aaeb255679f0
GIT binary patch
literal 3693
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
LNkvXXu0mjf?`sR-

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index bd0ff35..93cad81 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -261,9 +261,9 @@ body:hover::-webkit-scrollbar-thumb
 .toast-header, .toast-body
     font-size: 16px
 
-// .Vue-Toastification__container
-//     &.bloodline-toast-container
-//         &.top-right
-//             @media (min-width: 992px)
-//                 top: 100px
+.Vue-Toastification__container
+    &.bloodline-toast-container
+        &.top-right
+            @media (min-width: 992px)
+                top: 100px
 </style>
diff --git a/src/components/BloodChart.vue b/src/components/BloodChart.vue
index 3c2f357..910a7bd 100644
--- a/src/components/BloodChart.vue
+++ b/src/components/BloodChart.vue
@@ -21,7 +21,8 @@
 				<div class="blood-chart-element-header">
 					<div class="blood-chart-coin">
 						<template v-if="cycleStore.getCycleWinner.contractAddress === coin.contractAddress">
-							<img :src="coin.vampwinner2" alt="logo" />
+							<img class="logo" :src="coin.vamplogo" alt="logo" />
+							<img class="crown" src="/assets/img/winnerCrown.png" alt="" />
 						</template>
 						<template v-else>
 							<img :src="coin.vamplogo" alt="logo" />
@@ -95,7 +96,7 @@
 
 <script setup>
 import { computed, ref, inject, onMounted } from "vue";
-import { getPercentage, compactNumber, formatNumber } from "@/helper/helper.js";
+import { getPercentage, formatNumber } from "@/helper/helper.js";
 import { useCycleStore } from "@/stores/cycles";
 
 import { useMemeburnerStore } from "@/stores/memeburner";
@@ -146,11 +147,14 @@ function getPercentageBloodChart(amount, goal) {
     justify-content: center
     // margin-bottom: 80px
     position: relative
+    margin-top: 24px
 .blood-chart
     height: 560px
     width: 100%
     justify-content: space-around
     display: inline-flex
+    overflow: unset
+    overflow-x: hidden
     @media (min-width: 992px)
         gap: 32px
         width: unset
@@ -172,15 +176,22 @@ function getPercentageBloodChart(amount, goal) {
                 margin-right: auto
                 position: relative
                 margin-bottom: 16px
-                overflow: hidden
+                // overflow: hidden
                 height: 80px
                 width: 80px
                 @media (min-width: 992px)
                     height: 72px
                     width: 72px
                 img
-                    height: 100%
-                    width: 100%
+                    &.logo
+                        height: 100%
+                        width: 100%
+                img
+                    &.crown
+                        position: absolute
+                        top: -10px
+                        transform: translate(-50%, -50%)
+                        left: 50%
             .blood-chart-coin-title
                 text-align: center
                 margin-bottom: 32px
diff --git a/src/components/CardComponent.vue b/src/components/CardComponent.vue
index 919c007..438d85e 100644
--- a/src/components/CardComponent.vue
+++ b/src/components/CardComponent.vue
@@ -69,7 +69,6 @@ const props = defineProps({
         display: flex
         text-align: left
         gap: 16px
-        height: 56px
         .token-logo
             margin-left: auto
     .connected-stake-buttons
diff --git a/src/components/ClaimComponent.vue b/src/components/ClaimComponent.vue
index 5c2d36a..cbf74a1 100644
--- a/src/components/ClaimComponent.vue
+++ b/src/components/ClaimComponent.vue
@@ -66,6 +66,13 @@
 					You can claim, once the cycle is over.
 				</div>
 			</template>
+			<template v-else-if="cycleStore.rewardsSacrificeCurrentCycle > 0n">
+				<div class="connected-stake-buttons">
+					<div class="btn btn-immortal mid-mid-text btn--disabled">Claim</div>
+					<div class="btn btn-immortal mid-mid-text btn--disabled">stake</div>
+				</div>
+				<div class="text-center">You can claim, once the cycle is over</div>
+			</template>
 			<template v-else>
 				<div class="btn btn-immortal mid-mid-text text-center" @click="router.push({ name: 'home' })">
 					Go to Sacrifice
@@ -86,6 +93,7 @@ import { waitForTransaction } from "@wagmi/core";
 import LoadingComponent from "@/components/LoadingComponent.vue";
 import StakeSuccessToast from "@/components/toasts/StakeSuccessToast.vue";
 
+import { useCycleStore } from "@/stores/cycles";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
@@ -98,6 +106,8 @@ const toast = useToast();
 const rewardLockerStore = useRewardLockerStore();
 const walletStore = useWalletStoreV2();
 const tokenStore = useTokenStore();
+const cycleStore = useCycleStore();
+
 const router = useRouter();
 
 const props = defineProps({
diff --git a/src/components/ConnectWallet.vue b/src/components/ConnectWallet.vue
index 0fa2c24..ebb048c 100644
--- a/src/components/ConnectWallet.vue
+++ b/src/components/ConnectWallet.vue
@@ -209,7 +209,6 @@ async function connectWallet(connector) {
             display: flex
             gap: 16px
             align-items: center
-            height: 56px
             .connected-token-button
                 margin-left: auto
                 .bloodline-badge
diff --git a/src/components/SacrificeToken.vue b/src/components/SacrificeToken.vue
index 8e473a9..8d2b481 100644
--- a/src/components/SacrificeToken.vue
+++ b/src/components/SacrificeToken.vue
@@ -512,7 +512,6 @@ async function changeActiveToken(token) {
         .sacrifice-to-body
             display: flex
             justify-content: space-between
-            height: 56px
 .sacrificed-info
     display: flex
     padding: 8px 24px
diff --git a/src/components/StakeComponentV1.vue b/src/components/StakeComponentV1.vue
index 1e80851..d4820e0 100644
--- a/src/components/StakeComponentV1.vue
+++ b/src/components/StakeComponentV1.vue
@@ -32,44 +32,50 @@
 				<slot name="body">
 					<token-name-price name="$BLOOD staked" :price="formatNumber(walletStore.staked)"></token-name-price>
 					<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline-token'"></token-logo>
-					<token-name-price class="stake-reward" name="Bonus" price="+25%"></token-name-price>
+					<token-name-price :variant="true" class="stake-reward" name="Bonus" price="+25%"></token-name-price>
 				</slot>
 			</div>
 			<slot name="actions">
 				<div class="connected-stake-buttons" v-if="!stakeMenu">
-					<div class="mid-mid-text text-center" disabled v-if="!walletStore.connected">
-						Please Connect Your Wallet
-					</div>
-					<div
-						class="btn btn-immortal mid-mid-text"
-						disabled
-						v-if="walletStore.connected && cycleStore.currentCycle === 1"
-					>
-						Stake
-					</div>
-					<div
-						class="btn btn-immortal mid-mid-text"
-						v-else-if="walletStore.connected && cycleStore.currentCycle > 1"
-						@click="openStake"
-					>
-						Stake
-					</div>
-					<div
-						v-if="
-							walletStore.connected &&
-							((walletStore.memeToken?.staked === 0 && !stakeonly) || cycleStore.currentCycle === 1)
-						"
-						class="btn btn-immortal btn--disabled mid-mid-text"
-					>
-						Unstake
-					</div>
-					<div
-						v-else-if="walletStore.connected && !stakeonly"
-						class="btn btn-immortal mid-mid-text"
-						@click="openUnstake"
-					>
-						Unstake
-					</div>
+					<template v-if="!walletStore.connected">
+						<div class="mid-mid-text text-center" disabled>Please Connect Your Wallet</div>
+					</template>
+					<template v-else-if="walletStore.connected && !ableToUnstake">
+						<div class="btn btn-immortal mid-mid-text" disabled v-if="cycleStore.currentCycle === 1">
+							Stake
+						</div>
+						<div
+							class="btn btn-immortal mid-mid-text"
+							v-else-if="cycleStore.currentCycle > 1"
+							@click="openStake"
+						>
+							Stake
+						</div>
+						<div
+							v-if="(walletStore.memeToken?.staked === 0 && !stakeonly) || cycleStore.currentCycle === 1"
+							class="btn btn-immortal btn--disabled mid-mid-text"
+						>
+							Unstake
+						</div>
+						<div v-else-if="!stakeonly" class="btn btn-immortal mid-mid-text" @click="openUnstake">
+							Unstake
+						</div>
+					</template>
+					<template v-else-if="walletStore.connected && ableToUnstake">
+						<div
+							class="btn btn-immortal mid-mid-text text-center"
+							v-if="unstakeState === 0 && walletStore.orderedUnstakedAmount > 0n && ableToUnstake"
+							@click="unstake"
+						>
+							Claim Unstaked $BLOOD
+						</div>
+						<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 1">
+							Sign Transaction
+						</div>
+						<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 2">
+							<loading-component></loading-component>
+						</div>
+					</template>
 				</div>
 				<Transition name="smooth">
 					<stake-menu
@@ -132,25 +138,10 @@
 				</div>
 				<div
 					class="connected-stake-first-round small-text text-center"
-					v-if="walletStore.orderedUnstakedAmount > 0"
+					v-if="walletStore.orderedUnstakedAmount > 0n && !ableToUnstake"
 				>
 					You can claim {{ formatNumber(walletStore.orderedUnstakedAmount) }} $BLOOD next cycle.
 				</div>
-				<div>
-					<div
-						class="btn btn-immortal mid-mid-text text-center"
-						v-if="unstakeState === 0 && walletStore.orderedUnstakedAmount > 0n && ableToUnstake"
-						@click="unstake"
-					>
-						Claim Unstaked $BLOOD
-					</div>
-					<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 1">
-						Sign Transaction
-					</div>
-					<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 2">
-						<loading-component></loading-component>
-					</div>
-				</div>
 			</slot>
 			<slot></slot>
 		</div>
@@ -302,14 +293,14 @@ async function stakeToken() {
 		const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
 		console.log("data", data);
 		state.value = 0;
-		await walletStore.loadWalletData();
 		showSuccessToast(
 			formatNumber(outputClaim),
 			"Success!",
 			"You just staked",
 			"Your next sacrifice will get an extra staking bonus as a reward."
 		);
-		//reload data
+		await walletStore.loadWalletData();
+		stakeMenu.value = false;
 	} catch (error) {
 		console.error(error);
 		throw new Error(error);
@@ -319,8 +310,9 @@ async function stakeToken() {
 }
 
 const ableToUnstake = computed(() => {
-	var cycleList = walletStore.memeToken.orderedUnstakedCycles.findIndex((obj) => obj.result > 0n);
-	if (cycleList && cycleList + 1 <= cycleStore.currentCycle) {
+	var cycleList = walletStore.memeToken?.orderedUnstakedCycles?.findIndex((obj) => obj.result > 0n);
+	console.log("cycleList", cycleList);
+	if (cycleList && cycleList > -1 && cycleList + 1 <= cycleStore.currentCycle) {
 		return true;
 	}
 	return false;
diff --git a/src/components/StakeMenu.vue b/src/components/StakeMenu.vue
index 1b30353..5572d2d 100644
--- a/src/components/StakeMenu.vue
+++ b/src/components/StakeMenu.vue
@@ -14,7 +14,13 @@
 		<div class="stake-menu-actions">
 			<slot name="body">
 				<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="rewardLockerStore.stakeBloodline(tokenNumber)"
+					v-if="props.stake"
+				>
+					Stake
+				</div>
 				<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake for Next Cycle</div>
 				<div class="btn btn-immortal black" @click="emit('close')">Cancel</div>
 			</slot>
diff --git a/src/components/TokenClaim.vue b/src/components/TokenClaim.vue
index c603192..10c6a3b 100644
--- a/src/components/TokenClaim.vue
+++ b/src/components/TokenClaim.vue
@@ -54,7 +54,18 @@
 				<button class="btn btn-immortal sub-header" @click="showPanel = true">Connect</button>
 			</template>
 			<template v-else-if="activeCycle === currentCycle">
-				<button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">Sacrifice</button>
+				<template v-if="rewardsSacrifice > 0n">
+					<div class="stake-buttons">
+						<button class="btn btn-immortal sub-header btn--disabled">Claim</button>
+						<button class="btn btn-immortal sub-header btn--disabled">Stake</button>
+					</div>
+					<div>You can claim once the current cycle is finished and the clan bonus calculated</div>
+				</template>
+				<template v-else>
+					<button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">
+						Sacrifice
+					</button>
+				</template>
 			</template>
 			<template v-else-if="rewardsTotal > 0">
 				<Transition name="smooth">
@@ -285,6 +296,9 @@ const stateStakeClaimComp = computed(() => {
         text-align: left
     .claim-button
         text-align: center
+        display: flex
+        flex-direction: column
+        gap: 24px
     .stake-buttons
         display: flex
         text-align: center
@@ -308,7 +322,6 @@ const stateStakeClaimComp = computed(() => {
         justify-content: space-between
         text-align: left
         box-sizing: content-box
-        height: 56px
         .rewards-left
             display: flex
             flex-direction: column
diff --git a/src/components/TokenNamePrice.vue b/src/components/TokenNamePrice.vue
index c082778..099ba62 100644
--- a/src/components/TokenNamePrice.vue
+++ b/src/components/TokenNamePrice.vue
@@ -1,7 +1,9 @@
 <template>
 	<div class="token-price-wrapper">
 		<div class="token-name mid-text">{{ props.name }}</div>
-		<div class="token-price sub-header">{{ props.price }}</div>
+		<div class="token-price" :class="{ 'sub-header-2': !props.variant, 'sub-header': props.variant }">
+			{{ props.price }}
+		</div>
 	</div>
 </template>
 
@@ -9,6 +11,11 @@
 const props = defineProps({
 	name: String,
 	price: [Number, String],
+	variant: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
 });
 </script>
 
diff --git a/src/components/toasts/StakeSuccessToast.vue b/src/components/toasts/StakeSuccessToast.vue
index ee9c960..60ed5fb 100644
--- a/src/components/toasts/StakeSuccessToast.vue
+++ b/src/components/toasts/StakeSuccessToast.vue
@@ -10,7 +10,7 @@
 			</div>
 			<div class="amount-number">
 				<div class="token-amount number-mobile">{{ props.value }}</div>
-				<div class="token-name">$Blood</div>
+				<div class="token-name">$BLOOD</div>
 			</div>
 			<div class="info toast-body">
 				{{ props.info }}
diff --git a/src/components/toasts/SwitchNetworkToast.vue b/src/components/toasts/SwitchNetworkToast.vue
new file mode 100644
index 0000000..56f47ab
--- /dev/null
+++ b/src/components/toasts/SwitchNetworkToast.vue
@@ -0,0 +1,86 @@
+<template>
+	<div class="network-switch-card">
+		<div>Please switch Network to</div>
+		<div>
+			<b>{{ props.network.chains[0].name }}</b>
+		</div>
+	</div>
+</template>
+<script setup>
+import LoadingComponent from "@/components/LoadingComponent.vue";
+import { getCurrentInstance, computed, watch, inject } from "vue";
+import { useTokenStore } from "@/stores/tokens";
+import { useSacrificeStore } from "@/stores/sacrifice";
+
+import CardComponent from "@/components/CardComponent.vue";
+import { useToast } from "vue-toastification";
+
+const emit = defineEmits(["sacrificed"]);
+
+const props = defineProps({
+	network: Object,
+});
+
+const toast = useToast();
+const tokenStore = useTokenStore();
+const sacrificeStore = useSacrificeStore();
+
+const instance = getCurrentInstance();
+const id = instance.attrs["toast-id"];
+const splashBlood = inject("splashBlood");
+
+function closeToast() {
+	toast.dismiss(id);
+}
+
+const stateComputed = computed(() => {
+	let returnState = 0;
+	if (
+		sacrificeStore.sacrificeNumber === null ||
+		sacrificeStore.sacrificeNumber === "" ||
+		sacrificeStore.sacrificeNumber === 0
+	) {
+		returnState = 0;
+	} else if (sacrificeStore.sacrificeState === 2) {
+		returnState = 2;
+	} else if (sacrificeStore.sacrificeState === 3) {
+		returnState = 3;
+	} else if (
+		sacrificeStore.sacrificeNumber !== null ||
+		sacrificeStore.sacrificeNumber !== "" ||
+		sacrificeStore.sacrificeNumber > 0
+	) {
+		returnState = 1;
+	}
+	return returnState;
+});
+
+async function sacrificeClick() {
+	try {
+		var result = await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, tokenStore.activeToken);
+		if (result) {
+			emit("sacrificed");
+		}
+	} catch (error) {
+		console.error("error", error);
+	} finally {
+		closeToast();
+	}
+}
+</script>
+<style lang="sass">
+.Vue-Toastification__container
+    .Vue-Toastification__toast--default
+        &.approve-toast
+            background: transparent
+        &.toast-card
+            padding: 24px 16px
+            border-radius: 10px
+            border: 2px solid var(--dark-purple, #4B0082)
+            background: var(--midnight-black, #0F0F0F)
+            .Vue-Toastification__toast-component-body
+                .network-switch-card
+                    display: flex
+                    flex-direction: column
+                    display: flex
+</style>
diff --git a/src/helper/helper.js b/src/helper/helper.js
index 755e507..e7bd912 100644
--- a/src/helper/helper.js
+++ b/src/helper/helper.js
@@ -1,21 +1,17 @@
 
-export function getImageUrl(url) {
-    return new URL(url, import.meta.url).href;
-}
-
 export function getPercentage(amount, goal) {
     return ((Number(amount) / Number(goal)) * 100).toFixed(2);
 }
 
-
-export function compactNumber(number) {
-    return Intl.NumberFormat("en-US", {
-		notation: "compact",
-		maximumFractionDigits: 2,
-	}).format(parseInt(number));
+// input type bigint
+export function formatBigIntDivision(nominator, denominator) {
+    const integer = (nominator / denominator).toString();
+    // pick how much digits after point to show
+    const fraction = (nominator % denominator).toString().substring(0,10);
+    // output type string
+    return integer + '.' + fraction;
 }
 
-
 export function formatNumber(number) {
     const options = {
 		style: "decimal",
@@ -37,13 +33,6 @@ export function getAddressShortName(address) {
 }
 
 
-export function numberWithCommas(x, ) {
-	x = x.toString();
-	var pattern = /(-?\d+)(\d{3})/;
-	while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
-	return x;
-}
-
 export function getblocky(address) {
 	var blockiesData = blockies
 		.create({
@@ -74,4 +63,4 @@ export function createDebounce() {
             fnc();
         }, delayMs || 500);
     };
-}
\ No newline at end of file
+}
diff --git a/src/main.js b/src/main.js
index c84db09..497886d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -45,6 +45,8 @@ import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-i
 import Toast from "vue-toastification";
 // Import the CSS or use your own!
 import "vue-toastification/dist/index.css";
+import SwitchNetworkToast from "@/components/toasts/SwitchNetworkToast.vue";
+import { useToast } from "vue-toastification";
 
 /* add icons to the library */
 library.add(
@@ -95,6 +97,35 @@ app.use(Toast, {
 });
 
 
+
+function showSwitchNetworkToast(network) {
+	const toast = useToast();
+
+	// Define the content object with the component, props and listeners
+	const content = {
+		component: SwitchNetworkToast,
+		// Any prop can be passed, but don't expect them to be reactive
+		props: {
+			network
+		},
+		// Listen and react to events using callbacks. In this case we listen for
+		// the "click" event emitted when clicking the toast button
+		listeners: {},
+	};
+
+	// Render the toast and its contents
+	return toast(content, {
+		position: "top-right",
+		icon: false,
+		closeOnClick: false,
+		// toastClassName: "modal-overlay",
+		hideProgressBar: true,
+		timeout: false,
+		toastClassName: "approve-toast toast-card",
+	});
+}
+
+
 try {
     const walletStore = useWalletStoreV2();
 	const tokenStore = useTokenStore();
@@ -107,7 +138,8 @@ try {
 	const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
 	console.log("hier chains");
 	const { chains, publicClient, webSocketPublicClient } = configureChains(
-		[goerli, mainnet],
+		// [goerli, mainnet],
+		[goerli],
 		[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
 	);
 
@@ -203,11 +235,23 @@ try {
 		}
 	});
 
-	watchNetwork((network) => {
+    watchNetwork((network) => {
+        
+        const chainAllowed = network.chains?.find((obj) => {
+            return obj.network === network.chain.network;
+        });
+        if (!chainAllowed) {
+            console.log("chain not allowed", network.chain);
+            showSwitchNetworkToast(network);
+            return
+        } else {
+            console.log("chain allowed", network.chain);
+        }
 		if (network.chain) {
 			walletStore.chain = network.chain;
 		}
-	});
+    });
+    
 
 
 	await walletStore.init();
diff --git a/src/stores/cycles.js b/src/stores/cycles.js
index 1d700ea..d618ac9 100644
--- a/src/stores/cycles.js
+++ b/src/stores/cycles.js
@@ -37,6 +37,13 @@ export const useCycleStore = defineStore("cycles", {
 			}
 			return this.cycles[this.activeCycle]?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals;
 		},
+		rewardsSacrificeCurrentCycle() {
+			const tokenStore = useTokenStore();
+			if (!this.cycles[this.currentCycle]?.rewards_sacrifice) {
+				return 0n;
+			}
+			return this.cycles[this.currentCycle]?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals;
+		},
 		rewardsStaking() {
 			const tokenStore = useTokenStore();
 			if (!this.cycles[this.activeCycle]?.rewards_staking) {
@@ -90,15 +97,18 @@ export const useCycleStore = defineStore("cycles", {
 		//todo check if needed, or use fillcycle
 		async updateCurrentCycle(sacrificedToken) {
 			console.log("updateCurrentCycle");
-			const memeBurnerStore = useMemeburnerStore();
-			var data = await memeBurnerStore.getSacrificedCycle(this.currentCycle);
+            const memeBurnerStore = useMemeburnerStore();
+            const rewardLockerStore = useRewardLockerStore();
+            var data = await memeBurnerStore.getSacrificedCycle(this.currentCycle);
+            var tokenTotalSacrificed = await rewardLockerStore.getTotalSacrificeRewardsForAllToken(this.currentCycle);
 			console.log("this.currentCycle", this.currentCycle);
 			console.log("this.cycles", this.cycles);
 			if (this.cycles[this.currentCycle]) {
 				var tokenIndex = this.cycles[this.currentCycle].token.findIndex(
 					(tokenData) => tokenData.contractAddress === sacrificedToken
 				);
-				this.cycles[this.currentCycle].token[tokenIndex].amount = data[tokenIndex].result[1];
+                this.cycles[this.currentCycle].token[tokenIndex].amount = data[tokenIndex].result[1];
+                this.cycles[this.currentCycle].token[tokenIndex].amountInBLD = tokenTotalSacrificed[tokenIndex].result;
 			}
 		},
 		/**
@@ -158,7 +168,7 @@ export const useCycleStore = defineStore("cycles", {
 						const sacrificeClanReward = rewardData[index].result[1];
 						let clanwin = 0n;
 						if (cycleNumber !== this.currentCycle) {
-							clanwin = (coefficent / 10000n - 1n) * sacrificeClanReward;
+                            clanwin = (sacrificeClanReward * coefficent) / 10000n - sacrificeClanReward;
 							console.log("clanwin", clanwin);
 						}
 						const sacrificeRewards = sacrificeClanReward;
@@ -184,9 +194,9 @@ export const useCycleStore = defineStore("cycles", {
 				const winner = tokenArray.find((token) => token.amount === goalDecimal);
 				const goalInBLD = await memeBurnerStore.getGoalInBLOOD(cycleNumber);
 				//replace vamplogo cause it will automatically change the token for the cycle view (new design)
-				if (winner) {
-					winner.vamplogo = winner.vampwinner;
-				}
+				// if (winner) {
+				// 	winner.vamplogo = winner.vampwinner;
+				// }
 				this.cycles[cycleNumber] = {
 					goal: goal[0],
 					goalInBLD: goalInBLD,
@@ -208,9 +218,10 @@ export const useCycleStore = defineStore("cycles", {
 			const array = [];
 			const rewardLockerStore = useRewardLockerStore();
 			const lastCompletedCycle = await rewardLockerStore.lastCompletedCycle();
-			for (let index = 0; index <= Number(lastCompletedCycle); index++) {
+			for (let index = 1; index <= Number(lastCompletedCycle); index++) {
 				array.push(index);
-			}
+            }
+            console.log("array123", array);
 			return array;
 		},
 	},
diff --git a/src/stores/rewardlocker.js b/src/stores/rewardlocker.js
index 81c994b..884d035 100644
--- a/src/stores/rewardlocker.js
+++ b/src/stores/rewardlocker.js
@@ -32,7 +32,7 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		 */
 		async getRewards(walletAddress, cycleNumber, tokenAddress) {
 			try {
-				return await this.contract.read.rewards([walletAddress, cycleNumber, tokenAddress]);
+				return await this.contract.read.getRewards([walletAddress, cycleNumber, tokenAddress]);
 			} catch (error) {
 				console.error("getRewards", error);
 			}
@@ -136,7 +136,7 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 
 			const fromAddress = walletStore.address;
 			const spender = this.config.contractAddress;
-			const deadline = Date.now() + 20 * 60;
+			const deadline = BigInt(Date.now()) / 1000n + 1200n;
 			const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
 			const value = BigInt(tokenNumber) * 10n ** decimals;
 			const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
diff --git a/src/views/CycleView.vue b/src/views/CycleView.vue
index 5fc6ee6..91d9cc7 100644
--- a/src/views/CycleView.vue
+++ b/src/views/CycleView.vue
@@ -47,7 +47,8 @@
 					</div>
 					<div class="cycle-winner-right">
 						<div class="cycle-winner-logo">
-							<img :src="cycleStore.getCycleWinner.vampwinner" alt="" />
+							<img class="logo" :src="cycleStore.getCycleWinner.vamplogo" alt="" />
+							<img class="crown" src="/assets/img/winnerCrown.png" alt="" />
 						</div>
 						<div class="cycle-winner-name">{{ cycleStore.getCycleWinner.name }}</div>
 					</div>
@@ -278,17 +279,28 @@ function timeBetweenDates(expirationTimestamp) {
         justify-content: space-between
         align-items: center
         .cycle-winner-logo
-            height: 48px
-            width: 48px
+            height: 72px
+            width: 72px
             position: relative
             img
-                height: 72px
-                width: 72px
-                border-radius: 50%
-                position: absolute
-                left: 50%
-                top: 10px
-                transform: translate(-50%, -50%)
+                &.logo
+                    height: 100%
+                    width: 100%
+                    border: 1px solid yellow
+                    border-radius: 50%
+            img
+                &.crown
+                    position: absolute
+                    top: -10px
+                    transform: translate(-50%, -50%)
+                    left: 50%
+                // height: 72px
+                // width: 72px
+                // border-radius: 50%
+                // position: absolute
+                // left: 50%
+                // top: 10px
+                // transform: translate(-50%, -50%)
             &.inactive
                 img
                     height: 100%