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

comments + contract update +

Browse Source 
smaller design issues
This commit is contained in:
EmberSpirit
2023-10-12 20:01:11 +02:00
parent 68cd720c59
commit b5c6f8af33
37 changed files with 714 additions and 1480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SacrificeToken.vue
+72 -239
View File
@@ -1,6 +1,5 @@
<template>
<div class="sacrifice-wrapper card card--glow bloodline-wrapper">
<!-- {{ activeToken.allowance }} -->
<div class="sacrifice-headline">Select Sacrifice</div>
<div class="sacrifice-select-tokens">
<div class="sacrifice-tokens">
@@ -35,11 +34,11 @@
}"
>
<token-input
:modelValue="tokenNumber"
:modelValue="sacrificeStore.sacrificeNumber"
@input="
($event) => {
tokenNumber = $event.target.value;
return processChange($event.target.value);
sacrificeStore.sacrificeNumber = $event.target.value;
processChange($event.target.value);
}
"
:max="activeWalletToken?.balanceOf"
@@ -50,7 +49,7 @@
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
</template>
<template v-slot:message-end>
<template v-slot:message-end v-if="activeWalletToken?.balanceOf">
<div class="input-balance tiny-text">
Balance:
{{ activeWalletToken?.balanceOf }}
@@ -71,8 +70,8 @@
}"
>
<div class="sacrifice-to-body">
<token-name-price name="$BLOOD" :price="`≈${output?.toFixed(5)}`"></token-name-price>
<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline logo'"></token-logo>
<token-name-price name="$BLOOD" :price="`≈${formatNumber(output)}`"></token-name-price>
<token-logo :img="activeToken.vamp.logo" :size="64" :alt="activeToken.vamp.name"></token-logo>
</div>
<div class="sacrifice-staking-bonus">
@@ -84,7 +83,14 @@
}
"
>
<div class="mid-mid-text">+ Staking Bonus</div>
<div class="mid-mid-text" v-if="!walletStore.connected">+ Staking Bonus</div>
<div
class="mid-mid-text"
v-else-if="walletStore.memeToken?.staked === 0 || cycleStore.currentCycle === 1"
>
No Staking Bonus
</div>
<div class="mid-mid-text" v-else>+ TODO Staking Bonus</div>
<div class="icon">
<font-awesome-icon icon="chevron-down" />
</div>
@@ -106,7 +112,7 @@
<div
class="btn btn-immortal sub-header"
disabled
v-else-if="tokenNumber > activeWalletToken?.balanceOf"
v-else-if="sacrificeStore.sacrificeNumber > activeWalletToken?.balanceOf"
>
Insufficient Balance
</div>
@@ -114,25 +120,27 @@
class="btn btn-immortal sub-header"
v-else-if="
activeToken.allowance > 0 &&
activeToken.allowance >= tokenNumber &&
activeToken.allowance >= sacrificeStore.sacrificeNumber &&
(stateComputed === 1 || stateComputed === 4)
"
@click="sacrificeToken(tokenNumber)"
@click="sacrificeToken"
>
Sacrifice 🩸
</div>
<div
class="btn btn-immortal sub-header"
v-else-if="
(!activeToken.allowance || activeToken.allowance < tokenNumber) &&
(!activeToken.allowance || activeToken.allowance < sacrificeStore.sacrificeNumber) &&
(stateComputed === 1 || stateComputed === 4)
"
@click="approveToken(tokenNumber)"
@click="approveToken(sacrificeStore.sacrificeNumber)"
>
Approve Token
</div>
<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">
<div class="btn btn-immortal sub-header" disabled v-else-if="stateComputed === 2">
Sign Transaction
</div>
<div class="btn btn-immortal sub-header" disabled v-else-if="stateComputed === 3">
<loading-component></loading-component>
</div>
</template>
@@ -147,52 +155,42 @@
<script setup>
import { ref, defineProps, watch, inject, nextTick, onMounted, onBeforeUnmount, computed, markRaw } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useRoundsStore } from "@/stores/rounds";
import { useCycleStore } from "@/stores/cycles";
import { useTokenStore } from "@/stores/tokens";
import { useMemeburnerStore } from "@/stores/memeburner";
import { useUniswapStore } from "@/stores/uniswap";
import { useSacrificeStore } from "@/stores/sacrifice";
import StakeComponentV1 from "@/components/StakeComponentV1.vue";
import LoadingComponent from "@/components/LoadingComponent.vue";
import TokenInput from "@/components/TokenInput.vue";
import TokenNamePrice from "@/components/TokenNamePrice.vue";
import TokenLogo from "@/components/TokenLogo.vue";
import StakeSuccessToast from "@/components/toasts/StakeSuccessToast.vue";
import ApprovedToast from "@/components/toasts/ApprovedToast.vue";
import { useToast } from "vue-toastification";
const roundStore = useRoundsStore();
const toast = useToast();
import { storeToRefs } from "pinia";
import { waitForTransaction, readContract, watchBlockNumber, multicall } from "@wagmi/core";
import Helper from "@/utils/helper.js";
const cycleStore = useCycleStore();
const sacrificeStore = useSacrificeStore();
const toast = useToast();
import { debounce, formatNumber } from "@/helper/helper.js";
const isMobile = inject("isMobile");
const showPanel = inject("showPanel");
const walletStore = useWalletStoreV2();
// const { connected } = storeToRefs(walletStore);
const tokenStore = useTokenStore();
const { activeToken } = storeToRefs(tokenStore);
const memeburnerStore = useMemeburnerStore();
const uniswapStore = useUniswapStore();
const props = defineProps({
data: Array,
});
// watch(
// activeToken,
// () => {
// tokenNumber.value = null;
// },
// { deep: true }
// );
const tokenNumber = ref(null);
const output = ref(0);
const loading = ref(false);
const blockEvent = ref(null);
const approveToast = ref(null);
/**
* state 0 enter amount
* state 1 rdy to go
@@ -200,7 +198,6 @@ const blockEvent = ref(null);
* state 3 loading
* state 4 sacrificed
*/
const state = ref(0);
const showStakingMenu = ref(false);
const approvalData = ref(null);
@@ -214,18 +211,29 @@ const activeWalletToken = computed(() => {
const stateComputed = computed(() => {
let returnState = 0;
if (tokenNumber.value === null || tokenNumber.value === "" || tokenNumber.value === 0) {
if (
sacrificeStore.sacrificeNumber === null ||
sacrificeStore.sacrificeNumber === "" ||
sacrificeStore.sacrificeNumber === 0
) {
returnState = 0;
} else if (state.value === 2) {
} else if (sacrificeStore.sacrificeState === 2) {
returnState = 2;
} else if (state.value === 3) {
} else if (sacrificeStore.sacrificeState === 3) {
returnState = 3;
} else if (tokenNumber.value !== null || tokenNumber.value !== "" || tokenNumber.value > 0) {
} else if (
sacrificeStore.sacrificeNumber !== null ||
sacrificeStore.sacrificeNumber !== "" ||
sacrificeStore.sacrificeNumber > 0
) {
returnState = 1;
}
return returnState;
});
const processChange = Helper.debounce((value) => getRewardsFor(value));
const processChange = debounce(async (value) => {
const returnValue = await sacrificeStore.getRewardsFor(value, activeToken.value);
output.value = returnValue.output;
});
onMounted(() => {
blockEvent.value = watchBlockNumber(
@@ -234,37 +242,10 @@ onMounted(() => {
},
async (blockNumber) => {
console.log("blockNumber", blockNumber);
await getRewardsFor(tokenNumber.value);
// if (tokenNumber.value && tokenNumber.value > 0) {
// console.log("tokenNumber.value", tokenNumber.value);
// var quoteRewards = await uniswapStore.quoteExactInputSingle(
// tokenNumber.value * Math.pow(10, tokenStore.activeToken.decimals)
// );
// const quoteRewards1 = Number(quoteRewards) / Math.pow(10, tokenStore.activeToken.decimals);
// console.log("quoteRewards", quoteRewards);
// const rewardsForResult = await memeburnerStore.getRewardFor(
// tokenNumber.value * Math.pow(10, tokenStore.activeToken.decimals)
// );
// const rewardsForResult1 = Number(rewardsForResult) / Math.pow(10, tokenStore.activeToken.decimals);
// console.log("rewardsForResult1", rewardsForResult1);
// console.log("quoteRewards1", quoteRewards1);
// console.log("compare", quoteRewards1 * 0.995);
// console.log("ifcompare1", quoteRewards1 * 0.995 > rewardsForResult1);
// //return bigger number
// if (quoteRewards1 * 0.995 > rewardsForResult1) {
// //sacrificememe
// output.value = quoteRewards1;
// // const hash = await memeburnerStore.sacrificeMeme(tokenNumber.value);
// } else {
// output.value = rewardsForResult1;
// //sacrificeMemeAndBuyBLOOD
// // const hash = await memeburnerStore.sacrificeMeme(tokenNumber.value);
// }
// }
//
var rewardValue = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value);
output.value = rewardValue.output;
}
);
console.log("blockEvent.value", blockEvent.value);
});
onBeforeUnmount(() => {
@@ -272,196 +253,42 @@ onBeforeUnmount(() => {
blockEvent.value();
});
async function sacrificeToken(amount) {
console.log("sacrificeToken");
try {
state.value = 2;
const getRewards = await getRewardsFor(amount);
let hash = null;
if (getRewards.variant === "sacrifice") {
console.log("sacrifice");
hash = await memeburnerStore.sacrificeMeme(amount);
console.log("hash", hash);
} else {
console.log("buy");
hash = await memeburnerStore.sacrificeMemeAndBuyBLOOD(amount);
console.log("hash", hash);
}
state.value = 3;
const data = await waitForTransaction({
hash: hash,
onReplaced: (transaction) => console.log("check transaction canceled", transaction),
});
console.log("data", data);
var rewardData = data.logs.find((logObject) => {
return logObject.topics.find(
(topic) => topic === "0x5e60ccd3c81486143d815dce24867a494d7fee585a0a44282cf479b19a5186ee"
);
});
const outputSacrifice = Number(rewardData.data) / Math.pow(10, activeToken.value.decimals);
//activeToken is bad here, because it could change during async request
activeToken.value.allowance = await tokenStore.allowance();
state.value = 4;
console.log("state.value = 4");
showSuccessToast(
outputSacrifice?.toFixed(5),
"Success!",
"You turned your meme into:",
"You can claim once the current cycle is finished and your clan bonus was calculated."
);
await walletStore.loadWalletData();
await roundStore.fillRound(roundStore.currentRound, true);
} catch (error) {
state.value = 0;
console.error(error);
throw new Error(error);
}
}
async function approveToken(amount) {
try {
state.value = 2;
sacrificeStore.sacrificeState = 2;
const hash = await tokenStore.approveToken(amount);
state.value = 3;
sacrificeStore.sacrificeState = 3;
const data = await waitForTransaction({
hash: hash,
});
console.log("data", data);
activeToken.value.allowance = await tokenStore.allowance();
state.value = 1;
sacrificeStore.sacrificeState = 1;
approveToast.value = showApprovedToast();
} catch (error) {
console.error(error);
throw new Error(error);
} finally {
state.value = 0;
}
}
async function getRewardsFor(value) {
console.log("getRewardsFor", value);
loading.value = true;
let variant = null;
let newOutput = 0;
try {
if (!value || isNaN(value)) {
output.value = 0;
state.value = 0;
return;
}
const rewardsForResult = await memeburnerStore.getRewardFor(
BigInt(value * Math.pow(10, activeToken.value.decimals))
);
// const rewardsForResultNumber = Number(rewardsForResult[0]) / Math.pow(10, tokenStore.activeToken.decimals) + Number(rewardsForResult[1]) / Math.pow(10, tokenStore.activeToken.decimals);
const rewardsForResultNumber = rewardsForResult.reduce((x, y) => {
return x + Number(y) / Math.pow(10, tokenStore.activeToken.decimals);
}, 0);
var quoteRewards = await uniswapStore.quoteExactInputSingle(
tokenNumber.value * Math.pow(10, tokenStore.activeToken.decimals)
);
console.log("quoteRewards", quoteRewards);
let variant = "sacrifice";
if (quoteRewards.result) {
console.log("quoteRewards", quoteRewards);
const quoteRewardsNumber = Number(quoteRewards.amount) / Math.pow(10, tokenStore.activeToken.decimals);
if (quoteRewardsNumber * 0.995 > rewardsForResultNumber) {
variant = "buy";
console.log("use Buy-function", { quoteRewardsNumber: quoteRewardsNumber, rewardsForResultNumber });
} else {
console.log("use sacrifice-function", {
quoteRewardsNumber: quoteRewardsNumber,
rewardsForResultNumber,
});
}
} else {
/**
* case 4
* quoter threw an error
*/
//
newOutput = rewardsForResultNumber;
}
console.log("variant", variant);
const amountDecimal = BigInt(value * Math.pow(10, tokenStore.activeToken.decimals));
console.log("amountDecimal", amountDecimal);
if (!walletStore.connected || (walletStore.connected && activeToken.value.allowance < tokenNumber.value)) {
/**
* case 1
* user is not logged in or Allowance is less than Input, then I show getRewardsForSacrifice Value
* variante not relevant
*/
newOutput = rewardsForResultNumber;
} else if (walletStore.connected && variant === "sacrifice") {
/**
* case 2
* user is logged in and allowance is greater or equal input and variant is sacrifice
*/
newOutput = rewardsForResultNumber;
} else if (walletStore.connected && variant === "buy") {
/**
* case 3
* user is logged in and allowance is greater or equal input and variant is buy
* compare sacrificeMeme-result and sacrificeMemeAndBuyBLOOD-result
*/
const amountSacrifice = await readContract({
address: memeburnerStore.contract.address,
abi: memeburnerStore.contract.abi,
functionName: "sacrificeMeme",
args: [tokenStore.activeToken.contractAddress, amountDecimal.toString(), 0],
account: walletStore.address,
});
const amountBuy = await readContract({
address: memeburnerStore.contract.address,
abi: memeburnerStore.contract.abi,
functionName: "sacrificeMemeAndBuyBLOOD",
args: [tokenStore.activeToken.contractAddress, amountDecimal.toString(), 0],
account: walletStore.address,
});
const amountBuyNumber = Number(amountBuy) / Math.pow(10, tokenStore.activeToken.decimals);
const amountSacrificeNumber = Number(amountSacrifice) / Math.pow(10, tokenStore.activeToken.decimals);
console.log("sacrificeMemeAndBuyBLOOD", amountBuyNumber);
console.log("sacrificeMeme", amountSacrificeNumber);
if (amountBuyNumber * 0.995 > amountSacrificeNumber) {
variant = "buy";
newOutput = amountBuyNumber;
console.log("use buy after comparison sacrificeMemeAndBuyBLOOD and sacrificeMeme");
} else {
variant = "sacrifice";
newOutput = amountSacrificeNumber;
console.log("use sacrifice after comparison sacrificeMemeAndBuyBLOOD and sacrificeMeme");
}
}
output.value = newOutput;
return { ouput: newOutput, variant: variant };
} catch (error) {
console.error("getRewardsFor", error);
} finally {
loading.value = false;
sacrificeStore.sacrificeState = 0;
}
}
async function addTokens(value) {
tokenNumber.value = Number(tokenNumber.value) + Number(value);
output.value = await getRewardsFor(tokenNumber.value).output;
sacrificeStore.sacrificeNumber = Number(sacrificeStore.sacrificeNumber) + Number(value);
output.value = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value).output;
}
async function addMaxTokens() {
tokenNumber.value = activeWalletToken.value.balanceOf;
output.value = await getRewardsFor(tokenNumber.value).output;
sacrificeStore.sacrificeNumber = activeWalletToken.value.balanceOf;
output.value = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value).output;
}
function showSuccessToast(value, header, subheader, info) {
function showApprovedToast(value, header, subheader, info) {
// Define the content object with the component, props and listeners
const content = {
component: StakeSuccessToast,
component: ApprovedToast,
// 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,
@@ -473,16 +300,21 @@ function showSuccessToast(value, header, subheader, info) {
};
// Render the toast and its contents
toast(content, {
position: "top-center",
return toast(content, {
position: "top-right",
icon: false,
closeOnClick: false,
toastClassName: "modal-overlay",
closeButton: false,
// toastClassName: "modal-overlay",
hideProgressBar: true,
timeout: false,
toastClassName: "approve-toast toast-card",
});
}
//call function in the store and remove icon,
async function sacrificeToken() {
await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, activeToken.value);
toast.dismiss(approveToast.value);
}
</script>
<style lang="sass">
@@ -654,6 +486,7 @@ function showSuccessToast(value, header, subheader, info) {
.input-max
color: var(--grey, #858585)
font-weight: bold
&:hover, &:active, &:focus
color: var(--grey-light, #858585)
cursor: pointer