318 lines
10 KiB
Vue
318 lines
10 KiB
Vue
<template>
|
|
<div class="sacrifice-wrapper card 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="processChange" 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>
|
|
<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 Support</div>
|
|
<div class="sacrifice-fees-body-header-amount">42Gwei</div>
|
|
</div>
|
|
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
|
|
</div>
|
|
</div>
|
|
<div class="sacrifice-buttons-function-wrapper">
|
|
<div v-if="connected">
|
|
<div
|
|
class="btn btn-immortal"
|
|
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
|
|
@click="approvalData = memeburnerStore.sacrificeMeme(tokenNumber)"
|
|
>
|
|
<font-awesome-icon v-if="memeburnerStore.loading" icon="spinner" spin />
|
|
Sacrifce {{ activeToken.name }}
|
|
</div>
|
|
<div
|
|
class="btn btn-immortal"
|
|
v-else
|
|
@click="approvalData = tokenStore.approveToken(tokenNumber)"
|
|
>
|
|
<font-awesome-icon v-if="loading" icon="spinner" spin />
|
|
Approve {{ activeToken.name }}
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, watch, inject, computed } from "vue";
|
|
import { useWalletStore } from "@/stores/wallet";
|
|
import { useTokenStore } from "@/stores/tokens";
|
|
import { useMemeburnerStore } from "@/stores/memeBurner";
|
|
import { storeToRefs } from "pinia";
|
|
import Helper from "@/utils/helper.js";
|
|
const isMobile = inject("isMobile");
|
|
|
|
const walletStore = useWalletStore();
|
|
const { contract, 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(0);
|
|
const output = ref(0);
|
|
const approvalData = ref(null);
|
|
|
|
const processChange = Helper.debounce((e) => getRewardsFor(e));
|
|
|
|
async function getRewardsFor(e) {
|
|
if (!e.target.value || isNaN(e.target.value)) {
|
|
output.value = 0;
|
|
return;
|
|
}
|
|
console.log("activeToken.value.decimals", activeToken.value.decimals);
|
|
const rewardsForResult = await memeburnerStore.getRewardsFor(
|
|
BigInt(e.target.value * Math.pow(10, activeToken.value.decimals))
|
|
);
|
|
// var test = await memeburnerStore.getRewardsFor(10000);
|
|
// console.log("test", test);
|
|
// const rewardsForResult = await tokenStore.getRewardsFor(10000);
|
|
console.log("rewardsForResult", rewardsForResult);
|
|
console.log("tokenStore.memeToken.decimals", tokenStore.memeToken.decimals);
|
|
console.log(
|
|
"Math.pow(10, tokenStore.memeToken.decimals)",
|
|
Math.pow(10, tokenStore.memeToken.decimals)
|
|
);
|
|
output.value =
|
|
rewardsForResult / Math.pow(10, tokenStore.memeToken.decimals);
|
|
}
|
|
|
|
async function addTokens(value) {
|
|
tokenNumber.value = tokenNumber.value + value;
|
|
output.value = await memeburnerStore.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)
|
|
.sacrifice-inner
|
|
padding: 48px 24px
|
|
@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: space-between
|
|
@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
|
|
padding: 5px 26px
|
|
font-size: 16px
|
|
@media (min-width: 992px)
|
|
font-size: 24px
|
|
|
|
.sacrifice-buttons-function-wrapper
|
|
text-align: center
|
|
justify-content: center
|
|
margin-top: 24px
|
|
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 24px
|
|
margin-top: 24px
|
|
font-size: 16px
|
|
.sacrifice-fees-img
|
|
flex: 0 0 15%
|
|
.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
|
|
.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
|
|
</style>
|