update visual fixes

src/App.vue

@@ -228,7 +228,7 @@ onMounted(async () => {
         z-index: 100
         gap: 16px
         @media (min-width: 992px)
-            top: 142px
+            top: 10%
             right: 24px
             left: unset
             transform: unset
@@ -261,9 +261,9 @@ body:hover::-webkit-scrollbar-thumb
 .toast-header, .toast-body
     font-size: 16px
 
-.Vue-Toastification__container
+// .Vue-Toastification__container
-    &.bloodline-toast-container
+//     &.bloodline-toast-container
-        &.top-right
+//         &.top-right
-            @media (min-width: 992px)
+//             @media (min-width: 992px)
-                top: 100px
+//                 top: 100px
 </style>

src/assets/sass/buttons.sass

@@ -20,5 +20,6 @@
         &[disabled], &.btn--disabled
             background-color: darken($purple, 10%)
             cursor: not-allowed
+            color: var(--white-dark)
         &:hover,&:focus,&:active
             background-color: darken($purple, 10%),

src/assets/sass/variables.sass

@@ -9,6 +9,7 @@ $tertiary-dark: darken($tertiary, 20%)
 $tertiary-light: lighten($tertiary, 20%)
 
 $white: #F9F9FA
+$white-dark: darken($white, 20%)
 $black: #0F0F0F
 $grey: #858585
 $grey-light: lighten($grey, 20%)
@@ -31,7 +32,8 @@ $button-background-color: $black
     --tertiary: #{$tertiary}
     --tertiary-light: #{$tertiary-light}
     --tertiary-dark: #{$tertiary-dark}
-    --white: #{#F9F9FA}
+    --white: #{$white}
+    --white-dark: #{$white-dark}
     --grey: #{$grey}
     --grey-light: #{$grey-light}
     --grey2: #{$grey2}
@@ -99,6 +101,14 @@ $button-background-color: $black
     line-height: normal
     // @media (min-width: 992px)
     //     font-size: 30px
+.sub-header-2
+    font-family: Inter
+    font-style: normal
+    font-weight: 400
+    line-height: normal
+    font-size: 24px
+    @media (min-width: 992px)
+        font-size: 32px
 
 // :root
 //     --font-size-text: 16px

src/components/ClaimComponent.vue

@@ -177,7 +177,7 @@ async function claimAll() {
 		//
 		console.log("rewardData", rewardData);
 		//ClaimedReward (address staker, uint256 reward)
-		const outputClaim = rewardData.topics[2] / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
 		showSuccessToast(
 			formatNumber(outputClaim),
 			"Success!",

src/components/RewardsWrapper.vue

@@ -33,6 +33,5 @@ const props = defineProps({
         padding: 0 6px 6px 6px
         border-bottom: 1px solid var(--grey, #858585)
         justify-content: space-between
-        height: 56px
         box-sizing: content-box
 </style>

src/components/SacrificeToken.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="sacrifice-wrapper card card--glow">
-		<div class="sacrifice-headline">Select Sacrifice {{ splashBlood }}</div>
+		<div class="sacrifice-headline">Select Sacrifice</div>
 		<div class="sacrifice-select-tokens">
 			<div class="sacrifice-tokens">
 				<div
@@ -278,7 +278,6 @@ async function approveToken(amount) {
 		console.log("data", data);
 		activeToken.value.allowance = await tokenStore.allowance();
 		sacrificeStore.sacrificeState = 1;
-		approveToast.value = showApprovedToast();
 	} catch (error) {
 		console.error(error);
 		throw new Error(error);

src/components/StakeComponentV1.vue

@@ -30,13 +30,9 @@
 			</div>
 			<div class="connected-stake-body">
 				<slot name="body">
-					<token-name-price
+					<token-name-price name="$BLOOD staked" :price="formatNumber(walletStore.staked)"></token-name-price>
-						v-if="walletStore.memeToken?.staked"
-						:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
-						:price="formatNumber(walletStore.memeToken?.staked / 10n ** tokenStore.memeToken.decimals)"
-					></token-name-price>
 					<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline-token'"></token-logo>
-					<token-name-price class="stake-reward" name="Extra Reward" price="+25%"></token-name-price>
+					<token-name-price class="stake-reward" name="Bonus" price="+25%"></token-name-price>
 				</slot>
 			</div>
 			<slot name="actions">
@@ -134,8 +130,26 @@
 				<div class="connected-stake-first-round small-text text-center" v-if="cycleStore.currentCycle === 0">
 					No $BLOOD on the market. Staking is activated after the first cycle is finished.
 				</div>
-				<div class="connected-stake-first-round small-text text-center" v-else>
+				<div
-					You can claim your stake next cycle
+					class="connected-stake-first-round small-text text-center"
+					v-if="walletStore.orderedUnstakedAmount > 0"
+				>
+					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>
@@ -197,6 +211,7 @@ const loading = ref(false);
  * state 4 staked
  */
 const state = ref(0);
+const unstakeState = ref(0);
 
 function openStake() {
 	stake.value = true;
@@ -210,6 +225,31 @@ function openUnstake() {
 	stakeMenu.value = true;
 }
 
+async function unstake() {
+	try {
+		unstakeState.value = 1;
+		const hash = await rewardLockerStore.unstake();
+		unstakeState.value = 2;
+		const data = await waitForTransaction({
+			hash: hash,
+		});
+		var rewardData = data.logs.find((logObject) => {
+			return logObject.topics.find(
+				(topic) => topic === "0xb89343427f692590c388d6346a8e42ea497eb6682a04db1a53f77ea81771ca91"
+			);
+		});
+		console.log("rewardData", rewardData);
+
+		const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
+		showSuccessToast(formatNumber(outputClaim), "Success!", "You just unstaked");
+		await walletStore.loadWalletData();
+	} catch (error) {
+		console.error("unstake", error);
+	} finally {
+		unstakeState.value = 0;
+	}
+}
+
 async function orderUnstake() {
 	try {
 		state.value = 2;
@@ -221,22 +261,23 @@ async function orderUnstake() {
 		state.value = 4;
 		var rewardData = data.logs.find((logObject) => {
 			return logObject.topics.find(
-				(topic) => topic === "0xd0813ff03c470dcc7baa9ce36914dc2febdfd276d639deffaac383fd3db42ba3"
+				(topic) => topic === "0xf86340d97020c624010a208b733db95795281fbc45cb6e6a40d161f91fa3e4a0"
 			);
 		});
 		console.log("rewardData", rewardData);
 
-		const outputClaim = Number(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
 		showSuccessToast(
 			formatNumber(outputClaim),
 			"Success!",
 			"You just unstaked",
 			"You can claim your stake next cycle."
 		);
-		await walletStore.loadWalletData();
+		stakeMenu.value = false;
 	} catch (error) {
 		console.error("orderUnstake", error);
 	} finally {
+		await walletStore.loadWalletData();
 		state.value = 0;
 	}
 }
@@ -277,6 +318,14 @@ async function stakeToken() {
 	}
 }
 
+const ableToUnstake = computed(() => {
+	var cycleList = walletStore.memeToken.orderedUnstakedCycles.findIndex((obj) => obj.result > 0n);
+	if (cycleList && cycleList + 1 <= cycleStore.currentCycle) {
+		return true;
+	}
+	return false;
+});
+
 const balanceOf = computed(() => {
 	if (!walletStore.memeToken?.balanceOf) {
 		return 0n;

src/components/TokenInput.vue

@@ -14,7 +14,7 @@
 				</div>
 			</div>
 			<div class="right-side">
-				<token-logo img="/assets/img/vampir.png" :alt="'vampir'"></token-logo>
+				<token-logo v-if="props.logo" :img="props.logo" :alt="'vampir'"></token-logo>
 			</div>
 		</div>
 	</div>

src/components/TokenNamePrice.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="token-price-wrapper">
-		<div class="token-name small-text">{{ props.name }}</div>
+		<div class="token-name mid-text">{{ props.name }}</div>
 		<div class="token-price sub-header">{{ props.price }}</div>
 	</div>
 </template>

src/main.js

@@ -194,8 +194,7 @@ try {
 			await tokenStore.initV2();
 			await rewardLockerStore.init();
             await walletStore.loadWalletData();
-            // console.log("cycleStore.currentCycle", cycleStore.currentCycle);
+		    await cycleStore.fillCycle(cycleStore.currentCycle, true);
-		    // await cycleStore.fillCycle(cycleStore.currentCycle);
 			await uniswapStore.init();
 		} else {
 			walletStore.address = null;

src/stores/rewardlocker.js

@@ -88,7 +88,6 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 				sacrificedToken,
 				reward,
 			]);
-            
 		},
 		async lastCompletedCycle() {
 			return await this.contract.read.lastCompletedCycle();
@@ -120,8 +119,15 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		async orderUnstake() {
 			return await this.contract.write.orderUnstake();
 		},
-		async unstake(unstakeCycle) {
+        async unstake() {
-			return await this.contract.write.unstake([unstakeCycle]);
+            const walletStore = useWalletStoreV2();
+			const cycleStore = useCycleStore();
+            var cycleList = walletStore.memeToken.orderedUnstakedCycles.findIndex((obj) => obj.result > 0n);
+            if (cycleList && cycleList + 1 <= cycleStore.currentCycle) {
+				console.log("cycleList", cycleList);
+				const hash = await this.contract.write.unstake([cycleList + 1]);
+				return hash;
+            }
 		},
 		async stakeBloodline(tokenNumber) {
 			console.log("tokenNumber", tokenNumber);
@@ -171,5 +177,23 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, cycles, addresses]);
 			return hash;
 		},
+		async unstakeOrdered() {
+            const cycleStore = useCycleStore();
+            const walletStore = useWalletStoreV2();
+
+            const contracts = [];
+            for (let index = 1; index < cycleStore.currentCycle + 2; index++) {
+				contracts.push({
+					...this.contract,
+					functionName: "unstakeOrdered",
+					args: [index, walletStore.address],
+				});
+			}
+			const data = await multicall({
+				contracts,
+            });
+            console.log("data123", data);
+            return data;
+		},
 	},
 });

src/stores/walletV2.js

@@ -60,6 +60,20 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 			}
 			return this.memeToken.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
 		},
+        orderedUnstakedAmount() {
+			const tokenStore = useTokenStore();
+            if (!this.memeToken?.orderedUnstakedAmount) {
+                return 0n
+            }
+            return this.memeToken?.orderedUnstakedAmount / 10n ** tokenStore.memeToken.decimals;
+        },
+        staked() {
+           const tokenStore = useTokenStore();
+			if (!this.memeToken?.staked) {
+				return 0n;
+			}
+			return this.memeToken?.staked / 10n ** tokenStore.memeToken.decimals; 
+        }
 	},
 	actions: {
 		async init() {
@@ -129,6 +143,12 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 			const unclaimedRewardsArray = await rewardlockerStore.getTotalRewards(this.address);
 			const unclaimedRewards = unclaimedRewardsArray[0] + unclaimedRewardsArray[1];
 			this.memeToken.unclaimedRewards = unclaimedRewards;
+			this.memeToken.orderedUnstakedCycles = await rewardlockerStore.unstakeOrdered();
+            
+			console.log("this.memeToken.orderedUnstakedCycles", this.memeToken.orderedUnstakedCycles);
+			this.memeToken.orderedUnstakedAmount = this.memeToken.orderedUnstakedCycles.reduce((x, y) => {
+				return x + y.result;
+			}, 0n);
 		},
 	},
 	// persist: true,

src/views/CycleView.vue

@@ -40,8 +40,10 @@
 			<template v-if="cycleStore.currentCycle !== cycleStore.activeCycle">
 				<div class="bloodline-border bloodline-border purple cycle-winner" v-if="cycleStore.getCycleWinner">
 					<div class="cycle-winner-left">
-						<div class="cycle-winner-headline">Clan Winner</div>
+						<div class="cycle-winner-headline">Cycle Winner</div>
-						<div class="cycle-winner-subheadline">+25% Clan Bonus</div>
+						<div class="cycle-winner-subheadline">
+							+25% Clan Bonus on {{ cycleStore.getCycleWinner.name }} Sacrifice
+						</div>
 					</div>
 					<div class="cycle-winner-right">
 						<div class="cycle-winner-logo">
@@ -269,7 +271,7 @@ function timeBetweenDates(expirationTimestamp) {
         .cycle-winner-headline
             font-size: 24px
         .cycle-winner-subheadline
-            font-size: 12px
+            font-size: 14px
     .cycle-winner-right
         display: flex
         flex-direction: column