cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

toast rework + fix bugs

Browse Source
This commit is contained in:
EmberSpirit
2023-10-04 17:20:21 +02:00
parent 3d53d9e7c8
commit 64d46693ea
24 changed files with 713 additions and 1464 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ClaimComponent.vue
+144 -5
View File
@@ -12,7 +12,13 @@
<template v-if="walletStore.memeToken?.unclaimedRewards > 0">
<Transition name="smooth">
<div class="connected-stake-buttons" v-show="!stakeMenu">
<div class="btn btn-immortal mid-mid-text" @click="rewardLockerStore.claimAll">Claim</div>
<div class="btn btn-immortal mid-mid-text" @click="claimAll" v-if="stateStake === 0">Claim</div>
<div class="btn btn-immortal mid-mid-text" disabled v-else-if="stateStake === 2">
Sign Transaction
</div>
<div class="btn btn-immortal stake-button" disabled v-else-if="stateStake === 3">
<loading-component></loading-component>
</div>
<div class="btn btn-immortal mid-mid-text" @click="openStake">Stake</div>
</div>
</Transition>
@@ -25,9 +31,22 @@
v-if="stakeMenu"
>
<template v-slot:body>
<div class="btn btn-immortal stake-button" @click="stakeAndClaimAllRounds">
<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 0">
Enter Amount
</div>
<div
class="btn btn-immortal stake-button"
v-else-if="stateClaimComp === 1"
@click="stakeAndClaimAllRounds"
>
Stake & Claim Rest
</div>
<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 2">
Sign Transaction
</div>
<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 3">
<loading-component></loading-component>
</div>
<div
class="btn transparent small-text cancel-button text-center"
@click="stakeMenu = false"
@@ -35,6 +54,9 @@
Cancel
</div>
</template>
<template v-slot:message-end>
<div class="input-balance">Balance: {{ walletStore.memeToken?.unclaimedRewards }}</div>
</template>
</stake-menu>
</Transition>
<div class="connected-stake-first-round small-text text-center">
@@ -52,17 +74,22 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, computed } from "vue";
import CardComponent from "@/components/CardComponent.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 StakeSuccessToast from "@/components/toasts/StakeSuccessToast.vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import { useRewardLockerStore } from "@/stores/rewardlocker";
import { useRouter } from "vue-router";
import { useToast } from "vue-toastification";
const toast = useToast();
const rewardLockerStore = useRewardLockerStore();
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
@@ -79,6 +106,15 @@ const props = defineProps({
const stakeMenu = ref(false);
const stake = ref(null);
const tokenNumber = ref(null);
/**
* state 0 enter amount
* state 1 rdy to go
* state 2 signing
* state 3 loading
* state 4 staked
*/
const state = ref(0);
const stateClaim = ref(0);
function openStake() {
stake.value = true;
@@ -91,9 +127,112 @@ function openUnstake() {
}
async function stakeAndClaimAllRounds() {
try {
stateClaim.value = 2;
console.log("tokenNumber.value", tokenNumber.value);
console.log("walletStore.memeToken?.unclaimedRewards", walletStore.memeToken?.unclaimedRewards);
const coefficient = (10000 * tokenNumber.value) / walletStore.memeToken?.unclaimedRewards;
var hash = await rewardLockerStore.stakeAndClaimAllRounds(coefficient);
stateClaim.value = 3;
const data = await waitForTransaction({
hash: hash,
});
stateClaim.value = 4;
await walletStore.loadWalletData();
showSuccessToast(
walletStore.memeToken?.unclaimedRewards,
"Success!",
"You just claimed and staked",
"Join the next cycle to increase your rewards and win with your clan"
);
} catch (error) {
stateClaim.value = 0;
console.error(error);
throw new Error(error);
}
}
async function claimAll() {
try {
state.value = 2;
const hash = await rewardLockerStore.claimAll();
state.value = 3;
const data = await waitForTransaction({
hash: hash,
});
console.log("data", data);
await walletStore.loadWalletData();
showSuccessToast(
walletStore.memeToken?.unclaimedRewards,
"Success!",
"You just claimed",
"Join the next cycle to increase your rewards and win with your clan."
);
} catch (error) {
state.value = 0;
console.error(error);
throw new Error(error);
}
}
const stateStake = computed(() => {
let returnState = 0;
if (state.value === 2) {
returnState = 2;
} else if (state.value === 3) {
returnState = 3;
}
return returnState;
});
const stateClaimComp = computed(() => {
let returnState = 0;
console.log("tokenNumber.value", tokenNumber.value);
const coefficient = (10000 * tokenNumber.value) / walletStore.memeToken?.unclaimedRewards;
var result = await rewardLockerStore.stakeAndClaimAllRounds(coefficient);
if (
tokenNumber.value === null ||
tokenNumber.value === "" ||
tokenNumber.value === 0 ||
tokenNumber.value > walletStore.memeToken?.unclaimedRewards
) {
returnState = 0;
} else if (stateClaim.value === 2) {
returnState = 2;
} else if (stateClaim.value === 3) {
returnState = 3;
} else if (tokenNumber.value !== null || tokenNumber.value !== "" || tokenNumber.value > 0) {
returnState = 1;
}
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>