toast rework + fix bugs

src/components/SacrificeToken.vue

@@ -68,7 +68,7 @@
 						<div class="sacrifice-to-output-rewards header">{{ output.toFixed(5) }}</div>
 					</div>
 					<div class="sacrifice-logo">
-						<img :src="activeToken.vamp?.logo" :alt="activeToken.vamp.name" />
+						<img :src="activeToken.vamp?.logo" :alt="activeToken.vamp?.name" />
 					</div>
 				</div>
 				<div class="sacrifice-staking-bonus">
@@ -90,7 +90,7 @@
 					</stake-component-v1>
 				</div>
 			</div>
-			<div class="sacrificed-info" v-if="state === 4">
+			<div class="sacrificed-info" v-if="stateComputed === 4">
 				<div class="left low-mid-text">You can claim your $BLOOD when the cycle is finished.</div>
 				<div class="right">
 					<img src="/assets/img/moon.png" alt="moon" />
@@ -109,14 +109,15 @@
 				</div>
 			</div>
 			<div class="sacrifice-buttons-function-wrapper">
+				{{ stateComputed }}
 				<template v-if="walletStore.connected">
-					<div class="btn btn-immortal sub-header" disabled v-if="state === 0">Enter Amount</div>
+					<div class="btn btn-immortal sub-header" disabled v-if="stateComputed === 0">Enter Amount</div>
 					<div
 						class="btn btn-immortal sub-header"
 						v-if="
 							activeToken.allowance > 0 &&
 							activeToken.allowance >= tokenNumber &&
-							(state === 1 || state === 4)
+							(stateComputed === 1 || stateComputed === 4)
 						"
 						@click="sacrificeToken(tokenNumber)"
 					>
@@ -126,14 +127,14 @@
 						class="btn btn-immortal sub-header"
 						v-if="
 							(!activeToken.allowance || activeToken.allowance < tokenNumber) &&
-							(state === 1 || state === 4)
+							(stateComputed === 1 || stateComputed === 4)
 						"
 						@click="approveToken(tokenNumber)"
 					>
 						Approve Token
 					</div>
-					<div class="btn btn-immortal sub-header" disabled v-if="state === 2">Sign Transaction</div>
-					<div class="btn btn-immortal sub-header" disabled v-if="state === 3">
+					<div class="btn btn-immortal sub-header" disabled v-if="stateComputed === 2">Sign Transaction</div>
+					<div class="btn btn-immortal sub-header" disabled v-if="stateComputed === 3">
 						<loading-component></loading-component>
 					</div>
 				</template>
@@ -154,14 +155,16 @@ import { useUniswapStore } from "@/stores/uniswap";
 import StakeComponentV1 from "@/components/StakeComponentV1.vue";
 import LoadingComponent from "@/components/LoadingComponent.vue";
 import TokenInput from "@/components/TokenInput.vue";
+import StakeSuccessToast from "@/components/toasts/StakeSuccessToast.vue";
+import { useToast } from "vue-toastification";
 
+const toast = useToast();
 import { storeToRefs } from "pinia";
 import { waitForTransaction, readContract, watchBlockNumber } from "@wagmi/core";
 
 import Helper from "@/utils/helper.js";
 const isMobile = inject("isMobile");
 const showPanel = inject("showPanel");
-const showModal = inject("showModal");
 
 const walletStore = useWalletStoreV2();
 // const { connected } = storeToRefs(walletStore);
@@ -199,6 +202,19 @@ const state = ref(0);
 const showStakingMenu = ref(false);
 const approvalData = ref(null);
 
+const stateComputed = 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;
+});
 const processChange = Helper.debounce((value) => getRewardsFor(value));
 
 onMounted(() => {
@@ -267,7 +283,12 @@ async function sacrificeToken(amount) {
 		console.log("data", data);
 		activeToken.value.allowance = await tokenStore.allowance();
 		state.value = 4;
-		showModal.value = true;
+		showSuccessToast(
+			tokenStore.activeToken.rewards?.toFixed(5),
+			"Success!",
+			"You turned your meme into:",
+			"You can claim once the current cycle is finished and your clan bonus was calculated."
+		);
 	} catch (error) {
 		state.value = 0;
 		console.error(error);
@@ -288,8 +309,6 @@ async function approveToken(amount) {
 	} catch (error) {
 		console.error(error);
 		throw new Error(error);
-	} finally {
-		state.value = 1;
 	}
 }
 
@@ -385,6 +404,36 @@ async function addTokens(value) {
 	tokenNumber.value = Number(tokenNumber.value) + Number(value);
 	output.value = await getRewardsFor(tokenNumber.value).output;
 }
+
+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">