426 lines
13 KiB
Vue
426 lines
13 KiB
Vue
<template>
|
|
<div class="sacrifice-wrapper bloodline-wrapper">
|
|
<!-- {{ activeToken.allowance }} -->
|
|
<div class="sacrifice-inner">
|
|
<div class="sacrifice-headline">Select Sacrifice</div>
|
|
<div class="sacrifice-select-tokens">
|
|
<div class="sacrifice-tokens">
|
|
<div
|
|
class="sacrifice-token"
|
|
:class="[
|
|
{
|
|
'sacrifice-token--active': token.contractAddress === activeToken.contractAddress,
|
|
'bloodline-border': token.contractAddress === activeToken.contractAddress,
|
|
'bloodline-border--variant1': token.contractAddress === activeToken.contractAddress,
|
|
},
|
|
]"
|
|
v-for="token in props.data"
|
|
:key="token.contractAddress"
|
|
@click="tokenStore.changeActiveToken(token)"
|
|
>
|
|
<div class="sacrifice-token-logo">
|
|
<img v-if="isMobile" :src="token.logoMobile" alt="token logo" />
|
|
<img v-if="!isMobile" :src="token.logo" alt="token logo" />
|
|
</div>
|
|
<div class="sacrifice-token-name">{{ token.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
|
|
<div
|
|
:class="{
|
|
'sacrifice-from-wrapper': true,
|
|
'bloodline-border': true,
|
|
'bloodline-border--variant1': true,
|
|
purple: isMobile,
|
|
}"
|
|
>
|
|
<div class="sarcrifice-from-input">
|
|
<input
|
|
@input="($event) => getRewardsFor($event.target.value)"
|
|
v-model="tokenNumber"
|
|
:placeholder="0"
|
|
/>
|
|
<div class="sacrifice-logo">
|
|
<img :src="activeToken.logo" alt="vampir" />
|
|
</div>
|
|
</div>
|
|
<div class="value-adder">
|
|
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
|
|
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
|
|
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
|
|
<!-- <div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
|
|
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">
|
|
Max
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="sacrifice-divider bloodline-devider">
|
|
<font-awesome-icon :icon="['fas', 'arrow-down']" />
|
|
</div>
|
|
<div
|
|
:class="{
|
|
'sacrifice-from-wrapper': true,
|
|
'bloodline-border': true,
|
|
'bloodline-border--variant1': true,
|
|
purple: isMobile && output && output > 0,
|
|
}"
|
|
>
|
|
<div class="sarcrifice-from-input">
|
|
<div class="sacrifice-to-output">
|
|
<div class="sacrifice-to-output-coin">$BLOOD</div>
|
|
<div class="sacrifice-to-output-rewards">{{ output }}</div>
|
|
</div>
|
|
<div class="sacrifice-logo">
|
|
<img :src="activeToken.vamp?.logo" :alt="activeToken.vamp.name" />
|
|
</div>
|
|
</div>
|
|
<div class="sacrifice-staking-bonus">
|
|
<div
|
|
class="sacrifice-staking-bonus-inner"
|
|
@click="
|
|
(e) => {
|
|
showStakingMenu = !showStakingMenu;
|
|
}
|
|
"
|
|
>
|
|
<div class="mid-mid-text">No Staking Bonus</div>
|
|
<div class="icon">
|
|
<font-awesome-icon icon="chevron-down" />
|
|
</div>
|
|
</div>
|
|
<stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component>
|
|
</div>
|
|
</div>
|
|
<div class="sacrificed-info" v-if="state === 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" />
|
|
</div>
|
|
</div>
|
|
<div class="sacrifice-fees-info-wrapper">
|
|
<div class="sacrifice-fees-img">
|
|
<img src="/assets/img/fuel-noozle.png" alt="fuel noozle" />
|
|
</div>
|
|
<div class="sacrifice-fees-body">
|
|
<div class="sacrifice-fees-body-header">
|
|
<div class="sacrifice-fees-body-header-title">Gas Subsidy</div>
|
|
<div class="sacrifice-fees-body-header-amount">≤30 Gwei</div>
|
|
</div>
|
|
<div class="sacrifice-fees-body-subheader">The clan pays your transaction.</div>
|
|
</div>
|
|
</div>
|
|
<div class="sacrifice-buttons-function-wrapper">
|
|
<template v-if="walletStore.connected">
|
|
<div class="btn btn-immortal" disabled v-if="state === 0">Enter Amount</div>
|
|
<div
|
|
class="btn btn-immortal"
|
|
v-if="
|
|
activeToken.allowance > 0 &&
|
|
activeToken.allowance >= tokenNumber &&
|
|
(state === 1 || state === 4)
|
|
"
|
|
@click="sacrificeToken(tokenNumber)"
|
|
>
|
|
Sacrifce
|
|
</div>
|
|
<div
|
|
class="btn btn-immortal"
|
|
v-if="
|
|
(!activeToken.allowance || activeToken.allowance < tokenNumber) &&
|
|
(state === 1 || state === 4)
|
|
"
|
|
@click="approveToken(tokenNumber)"
|
|
>
|
|
Approve
|
|
</div>
|
|
<div class="btn btn-immortal" disabled v-if="state === 2">Sign Transaction</div>
|
|
<div class="btn btn-immortal" disabled v-if="state === 3">Loading...</div>
|
|
</template>
|
|
<template v-else>
|
|
<!-- <div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div> -->
|
|
<div class="btn btn-immortal" @click="showPanel = true">Connect</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, watch, inject, computed } from "vue";
|
|
import { useWalletStoreV2 } from "@/stores/walletV2";
|
|
import { useTokenStore } from "@/stores/tokens";
|
|
import { useMemeburnerStore } from "@/stores/memeburner";
|
|
import StakeComponent from "./StakeComponent.vue";
|
|
import { storeToRefs } from "pinia";
|
|
import { waitForTransaction } 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);
|
|
|
|
const tokenStore = useTokenStore();
|
|
const { activeToken, loading } = storeToRefs(tokenStore);
|
|
|
|
const memeburnerStore = useMemeburnerStore();
|
|
|
|
const props = defineProps({
|
|
data: Array,
|
|
});
|
|
|
|
// watch(
|
|
// activeToken,
|
|
// () => {
|
|
// tokenNumber.value = null;
|
|
// },
|
|
// { deep: true }
|
|
// );
|
|
|
|
const tokenNumber = ref(null);
|
|
const output = ref(0);
|
|
/**
|
|
* state 0 enter amount
|
|
* state 1 rdy to go
|
|
* state 2 signing
|
|
* state 3 loading
|
|
* state 4 sacrificed
|
|
*/
|
|
const state = ref(0);
|
|
const showStakingMenu = ref(false);
|
|
const approvalData = ref(null);
|
|
|
|
// const processChange = Helper.debounce((e) => getRewardsFor(e.target.value));
|
|
|
|
async function sacrificeToken(amount) {
|
|
try {
|
|
state.value = 2;
|
|
const hash = await memeburnerStore.sacrificeMeme(amount);
|
|
console.log("hash", hash);
|
|
state.value = 3;
|
|
const data = await waitForTransaction({
|
|
hash: hash,
|
|
});
|
|
console.log("data", data);
|
|
activeToken.value.allowance = await tokenStore.allowance();
|
|
state.value = 4;
|
|
showModal.value = true;
|
|
} catch (error) {
|
|
state.value = 0;
|
|
console.error(error);
|
|
throw new Error(error);
|
|
}
|
|
}
|
|
async function approveToken(amount) {
|
|
try {
|
|
state.value = 2;
|
|
const hash = await tokenStore.approveToken(amount);
|
|
state.value = 3;
|
|
const data = await waitForTransaction({
|
|
hash: hash,
|
|
});
|
|
activeToken.value.allowance = await tokenStore.allowance();
|
|
console.log("data", data);
|
|
state.value = 1;
|
|
} catch (error) {
|
|
console.error(error);
|
|
throw new Error(error);
|
|
} finally {
|
|
state.value = 1;
|
|
}
|
|
}
|
|
|
|
async function getRewardsFor(value) {
|
|
if (!value || isNaN(value)) {
|
|
output.value = 0;
|
|
state.value = 0;
|
|
return;
|
|
}
|
|
const rewardsForResult = await memeburnerStore.getRewardFor(
|
|
BigInt(value * Math.pow(10, activeToken.value.decimals))
|
|
);
|
|
// var test = await memeburnerStore.getRewardsFor(10000);
|
|
// console.log("test", test);
|
|
// const rewardsForResult = await tokenStore.getRewardsFor(10000);
|
|
state.value = 1;
|
|
output.value = rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
|
|
tokenStore.activeToken.rewards = output.value;
|
|
return output.value;
|
|
}
|
|
|
|
async function addTokens(value) {
|
|
tokenNumber.value = Number(tokenNumber.value) + Number(value);
|
|
output.value = await getRewardsFor(parseInt(tokenNumber.value));
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.sacrifice-wrapper
|
|
display: flex
|
|
flex-direction: column
|
|
margin-left: auto
|
|
margin-right: auto
|
|
background-color: var(--primary)
|
|
padding: 24px
|
|
align-items: center
|
|
.sacrifice-inner
|
|
@media (min-width: 992px)
|
|
padding: 48px 64px
|
|
.sacrifice-headline
|
|
text-align: center
|
|
font-size: 24px
|
|
margin-bottom: 32px
|
|
@media (min-width: 992px)
|
|
font-size: 36px
|
|
.sacrifice-select-tokens
|
|
display: flex
|
|
margin-bottom: 32px
|
|
.sacrifice-tokens
|
|
display: flex
|
|
width: 100%
|
|
justify-content: center
|
|
flex-wrap: wrap
|
|
gap: 12px
|
|
@media (min-width: 992px)
|
|
justify-content: space-evenly
|
|
|
|
.sacrifice-token
|
|
border-radius: 16px
|
|
padding: 12px
|
|
cursor: pointer
|
|
background-color: #0F0F0F
|
|
text-align: center
|
|
user-select: none
|
|
border: 4px solid transparent
|
|
.sacrifice-token-logo
|
|
pointer-events: none
|
|
// @media (min-width: 992px)
|
|
// padding: 0
|
|
// background-color: unset
|
|
&.sacrifice-token--active
|
|
border-color: var(--purple)
|
|
|
|
.sacrifice-token-name
|
|
font-size: 16px
|
|
@media (min-width: 992px)
|
|
padding: 5px 26px
|
|
font-size: 24px
|
|
|
|
.sacrifice-buttons-function-wrapper
|
|
text-align: center
|
|
justify-content: center
|
|
display: block
|
|
@media (min-width: 992px)
|
|
display: flex
|
|
.btn
|
|
padding: 16px 64px
|
|
.sacrifice-fees-info-wrapper
|
|
display: flex
|
|
border: 2px dashed var(--grey)
|
|
color: var(--grey)
|
|
border-radius: 16px
|
|
padding: 16px
|
|
font-size: 16px
|
|
.sacrifice-fees-img
|
|
flex: 0 0 15%
|
|
img
|
|
height: 46px
|
|
.sacrifice-fees-body
|
|
flex: 1 1 auto
|
|
.sacrifice-fees-body-header
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: space-between
|
|
margin-bottom: 8px
|
|
@media (min-width: 992px)
|
|
font-size: 24px
|
|
margin-bottom: 0
|
|
|
|
.sacrifice-from-to-wrapper
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 16px
|
|
.sacrifice-from-wrapper,.sacrifice-to-wrapper
|
|
.sarcrifice-from-input
|
|
display: flex
|
|
margin-bottom: 8px
|
|
// height: 60px
|
|
input
|
|
width: 100%
|
|
height: 45px
|
|
font-size: 24px
|
|
border-radius: 16px
|
|
padding: 0 16px
|
|
@media (min-width: 992px)
|
|
font-size: 32px
|
|
height: auto
|
|
.sacrifice-logo
|
|
margin-left: 16px
|
|
img
|
|
width: 45px
|
|
height: 45px
|
|
border-radius: 50%
|
|
pointer-events: none
|
|
@media (min-width: 992px)
|
|
height: 83px
|
|
width: auto
|
|
.sacrifice-to-output
|
|
flex: 1 1 auto
|
|
text-align: left
|
|
.sacrifice-to-output-coin
|
|
font-size: 16px
|
|
@media (min-width: 992px)
|
|
font-size: 24px
|
|
.sacrifice-to-output-rewards
|
|
font-size: 24px
|
|
@media (min-width: 992px)
|
|
font-size: 42px
|
|
.value-adder
|
|
display: flex
|
|
gap: 6px
|
|
.sacrifice-adder-step
|
|
font-size: 14px
|
|
&:hover,
|
|
&:active,
|
|
&:focus
|
|
background-color: var(--secondary)
|
|
cursor: pointer
|
|
// .sacrifice-adder-balance
|
|
// margin-left: auto
|
|
// .sacrifice-adder-max
|
|
// margin-left: 12px
|
|
// color: red
|
|
// &:hover,
|
|
// &:focus,
|
|
// &:active
|
|
// color: darken(red, 10%)
|
|
// transform: scale(1.1)
|
|
// transition: transform 0s
|
|
.sacrificed-info
|
|
display: flex
|
|
padding: 8px 24px
|
|
justify-content: space-between
|
|
align-items: center
|
|
align-self: stretch
|
|
border-radius: 16px
|
|
background: var(--midnight-black, #0F0F0F)
|
|
text-align: left
|
|
|
|
.sacrifice-staking-bonus
|
|
display: flex
|
|
flex-direction: column
|
|
padding: 4px 8px
|
|
row-gap: 8px
|
|
border-radius: 10px
|
|
background: var(--midnight-black, #0F0F0F)
|
|
.sacrifice-staking-bonus-inner
|
|
display: flex
|
|
justify-content: space-between
|
|
.icon
|
|
margin-left: auto
|
|
</style>
|