toast rework + fix bugs

src/components/StakeComponentV1.vue

@@ -35,7 +35,7 @@
 						:price="walletStore.memeToken?.staked"
 					></token-name-price>
 					<token-logo img="/assets/img/token/bloodline.png" :alt="'^y '"></token-logo>
-					<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price>
+					<token-name-price class="stake-reward" name="Extra Reward" price="+25%"></token-name-price>
 				</slot>
 			</div>
 			<slot name="actions">
@@ -55,15 +55,22 @@
 						v-model="tokenNumber"
 						@close="stakeMenu = false"
 						:stake="stake"
+						:amount="walletStore.memeToken.balanceOf"
 						v-if="stakeMenu & !unstakeMenu"
 					>
 						<template v-slot:body>
-							<div
-								class="btn btn-immortal stake-button"
-								@click="rewardLockerStore.stakeBloodline(tokenNumber)"
-							>
+							<div class="btn btn-immortal stake-button" disabled v-if="stateStake === 0">
+								Enter Amount
+							</div>
+							<div class="btn btn-immortal stake-button" v-else-if="stateStake === 1" @click="stakeToken">
 								Stake
 							</div>
+							<div class="btn btn-immortal stake-button" disabled v-if="stateStake === 2">
+								Sign Transaction
+							</div>
+							<div class="btn btn-immortal stake-button" disabled v-if="stateStake === 3">
+								<loading-component></loading-component>
+							</div>
 							<div
 								class="btn transparent small-text cancel-button text-center"
 								@click="stakeMenu = false"
@@ -71,6 +78,9 @@
 								Cancel
 							</div>
 						</template>
+						<template v-slot:message-end>
+							<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
+						</template>
 					</stake-menu>
 					<div class="unstake-menu" v-else-if="stakeMenu & unstakeMenu">
 						<div class="low-mid-text text-center">
@@ -90,11 +100,7 @@
 						</div>
 					</div>
 				</Transition>
-				<!-- todo v-if activeround -->
-				<div
-					class="connected-stake-first-round small-text text-center"
-					v-if="roundStore.currentRound === roundStore.activeRound"
-				>
+				<div class="connected-stake-first-round small-text text-center" v-if="roundStore.currentRound === 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">
@@ -107,17 +113,22 @@
 </template>
 
 <script setup>
-import { ref, useSlots } from "vue";
+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 { useRoundsStore } from "@/stores/rounds";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
+import { useToast } from "vue-toastification";
 
+const toast = useToast();
 const walletStore = useWalletStoreV2();
 const tokenStore = useTokenStore();
 const rewardLockerStore = useRewardLockerStore();
@@ -142,6 +153,15 @@ const stake = ref(null);
 const tokenNumber = ref(null);
 const loading = ref(false);
 
+/**
+ * state 0 enter amount
+ * state 1 rdy to go
+ * state 2 signing
+ * state 3 loading
+ * state 4 staked
+ */
+const state = ref(0);
+
 function openStake() {
 	stake.value = true;
 	unstakeMenu.value = false;
@@ -160,6 +180,70 @@ async function orderUnstake() {
 	console.log("orderUnstake", result);
 	loading.value = false;
 }
+
+async function stakeToken() {
+	try {
+		state.value = 2;
+		const hash = await rewardLockerStore.stakeBloodline(tokenNumber.value);
+		state.value = 3;
+		const data = await waitForTransaction({
+			hash: hash,
+		});
+		console.log("data", data);
+		state.value = 4;
+		await walletStore.loadWalletData();
+		showSuccessToast();
+		//reload data
+	} catch (error) {
+		state.value = 0;
+		console.error(error);
+		throw new Error(error);
+	}
+}
+
+const stateStake = computed(() => {
+	let returnState = 0;
+	if (tokenNumber.value === null || tokenNumber.value === "" || tokenNumber.value === 0) {
+		returnState = 0;
+	} else if (state.value === 2) {
+		returnState = 2;
+	} else if (state.value === 3) {
+		returnState = 3;
+	} else if (tokenNumber.value !== null || tokenNumber.value !== "" || tokenNumber.value > 0) {
+		returnState = 1;
+	}
+	return returnState;
+});
+
+function showSuccessToast() {
+	// 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: tokenNumber.value,
+			header: "Success!",
+			subheader: "You just staked",
+			info: "Your next sacrifice will get an extra staking bonus as a reward.",
+		},
+		// 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">