comments + contract update +

smaller design issues

src/components/StakeComponentV1.vue

@@ -32,23 +32,47 @@
 				<slot name="body">
 					<token-name-price
 						:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
-						:price="walletStore.memeToken?.staked"
+						:price="formatNumber(walletStore.memeToken?.staked)"
 					></token-name-price>
-					<token-logo img="/assets/img/token/bloodline.png" :alt="'^y '"></token-logo>
+					<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>
 				</slot>
 			</div>
 			<slot name="actions">
 				<div class="connected-stake-buttons" v-if="!stakeMenu">
-					<div class="btn btn-immortal mid-mid-text" disabled v-if="roundStore.currentRound === 1">Stake</div>
-					<div class="btn btn-immortal mid-mid-text" v-else @click="openStake">Stake</div>
+					<div class="mid-mid-text text-center" disabled v-if="!walletStore.connected">
+						Please Connect Your Wallet
+					</div>
 					<div
-						v-if="(walletStore.memeToken?.staked === 0 && !stakeonly) || roundStore.currentRound === 1"
+						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="!stakeonly" class="btn btn-immortal mid-mid-text" @click="openUnstake">Unstake</div>
+					<div
+						v-else-if="walletStore.connected && !stakeonly"
+						class="btn btn-immortal mid-mid-text"
+						@click="openUnstake"
+					>
+						Unstake
+					</div>
 				</div>
 				<Transition name="smooth">
 					<stake-menu
@@ -106,12 +130,9 @@
 						</div>
 					</div>
 				</Transition>
-				<div class="connected-stake-first-round small-text text-center" v-if="roundStore.currentRound === 0">
+				<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-claim-info low-mid-text text-center">
-					You can claim your stake next cycle.
-				</div>
 			</slot>
 			<slot></slot>
 		</div>
@@ -120,25 +141,25 @@
 
 <script setup>
 import { ref, useSlots, computed } from "vue";
-import CardComponent from "@/components/CardComponent.vue";
-import StakeSuccessToast from "@/components/toasts/StakeSuccessToast.vue";
 import StakeMenu from "@/components/StakeMenu.vue";
 import TokenNamePrice from "@/components/TokenNamePrice.vue";
 import TokenLogo from "@/components/TokenLogo.vue";
 import { waitForTransaction } from "@wagmi/core";
 import LoadingComponent from "@/components/LoadingComponent.vue";
+import { showSuccessToast } from "@/helper/toast.js";
 
-import { useRoundsStore } from "@/stores/rounds";
+import { useCycleStore } from "@/stores/cycles";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
 import { useToast } from "vue-toastification";
+import { formatNumber } from "@/helper/helper.js";
 
 const toast = useToast();
 const walletStore = useWalletStoreV2();
 const tokenStore = useTokenStore();
 const rewardLockerStore = useRewardLockerStore();
-const roundStore = useRoundsStore();
+const cycleStore = useCycleStore();
 const slots = useSlots();
 const props = defineProps({
 	stakeonly: {
@@ -198,7 +219,7 @@ async function orderUnstake() {
 
 		const outputClaim = Number(rewardData.topics[2]) / Math.pow(10, tokenStore.memeToken.decimals);
 		showSuccessToast(
-			outputClaim.toFixed(5),
+			formatNumber(outputClaim),
 			"Success!",
 			"You just unstaked",
 			"You can claim your stake next cycle."
@@ -232,7 +253,7 @@ async function stakeToken() {
 		state.value = 4;
 		await walletStore.loadWalletData();
 		showSuccessToast(
-			outputClaim.toFixed(5),
+			formatNumber(outputClaim),
 			"Success!",
 			"You just staked",
 			"Your next sacrifice will get an extra staking bonus as a reward."
@@ -259,36 +280,6 @@ const stateStake = computed(() => {
 	}
 	return returnState;
 });
-
-function showSuccessToast(value, header, subheader, info) {
-	// Define the content object with the component, props and listeners
-	const content = {
-		component: StakeSuccessToast,
-		// Any prop can be passed, but don't expect them to be reactive
-		props: {
-			// counter: this.counter,
-			// value: tokenStore.activeToken.rewards?.toFixed(5),
-			value: value,
-			header: header,
-			subheader: subheader,
-			info: info,
-		},
-		// 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
-	toast(content, {
-		position: "top-center",
-		icon: false,
-		closeOnClick: false,
-		toastClassName: "modal-overlay",
-		closeButton: false,
-		hideProgressBar: true,
-		timeout: false,
-	});
-}
 </script>
 
 <style lang="sass">