update contracts+ desktop version
This commit is contained in:
EmberSpirit
+244
-217
@@ -1,161 +1,162 @@
|
||||
<template>
|
||||
<div class="sacrifice-wrapper card card--glow 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 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 class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
|
||||
<div
|
||||
:class="{
|
||||
'sacrifice-from-wrapper': true,
|
||||
'bloodline-border': true,
|
||||
'bloodline-border--variant1': true,
|
||||
purple: true,
|
||||
}"
|
||||
</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: true,
|
||||
}"
|
||||
>
|
||||
<token-input
|
||||
:modelValue="tokenNumber"
|
||||
@input="
|
||||
($event) => {
|
||||
tokenNumber = $event.target.value;
|
||||
return getRewardsFor($event.target.value);
|
||||
}
|
||||
"
|
||||
:logo="activeToken.logo"
|
||||
>
|
||||
<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">
|
||||
<template v-slot:message>
|
||||
<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: 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" />
|
||||
</template>
|
||||
</token-input>
|
||||
</div>
|
||||
<div class="sacrifice-divider bloodline-devider">
|
||||
<font-awesome-icon :icon="['fas', 'arrow-down']" />
|
||||
</div>
|
||||
<div
|
||||
:class="{
|
||||
'sacrifice-to-wrapper': true,
|
||||
'bloodline-border': true,
|
||||
'bloodline-border--variant1': true,
|
||||
purple: output && output > 0,
|
||||
}"
|
||||
>
|
||||
<div class="sarcrifice-to-input">
|
||||
<div class="sacrifice-to-output">
|
||||
<div class="sacrifice-to-output-coin">$BLOOD</div>
|
||||
<div class="sacrifice-to-output-rewards header">
|
||||
{{ output }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-staking-bonus">
|
||||
<div
|
||||
class="sacrifice-staking-bonus-inner"
|
||||
@click="
|
||||
(e) => {
|
||||
showStakingMenu = !showStakingMenu;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="mid-mid-text">+ Staking Bonus</div>
|
||||
<div class="icon">
|
||||
<font-awesome-icon icon="chevron-down" />
|
||||
</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">+ Staking Bonus</div>
|
||||
<div class="icon">
|
||||
<font-awesome-icon icon="chevron-down" />
|
||||
</div>
|
||||
<stake-component-v1 :variant="1" v-if="showStakingMenu">
|
||||
<template v-slot:headline> {{ null }}</template>
|
||||
</stake-component-v1>
|
||||
</div>
|
||||
<stake-component-v1 :variant="1" v-if="showStakingMenu">
|
||||
<template v-slot:headline> {{ null }}</template>
|
||||
</stake-component-v1>
|
||||
|
||||
<!-- <stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component> -->
|
||||
</div>
|
||||
<!-- <stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component> -->
|
||||
</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="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 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-fees-info-wrapper">
|
||||
<div class="sacrifice-fees-img">
|
||||
<img src="/assets/img/fuel-noozle.png" alt="fuel noozle" />
|
||||
</div>
|
||||
<div class="sacrifice-buttons-function-wrapper">
|
||||
<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"
|
||||
v-if="
|
||||
activeToken.allowance > 0 &&
|
||||
activeToken.allowance >= tokenNumber &&
|
||||
(state === 1 || state === 4)
|
||||
"
|
||||
@click="sacrificeToken(tokenNumber)"
|
||||
>
|
||||
Sacrifce
|
||||
</div>
|
||||
<div
|
||||
class="btn btn-immortal sub-header"
|
||||
v-if="
|
||||
(!activeToken.allowance || activeToken.allowance < tokenNumber) &&
|
||||
(state === 1 || state === 4)
|
||||
"
|
||||
@click="approveToken(tokenNumber)"
|
||||
>
|
||||
Approve Token
|
||||
</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="showPanel = true">Connect</div>
|
||||
</template>
|
||||
<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 sub-header" disabled v-if="state === 0">Enter Amount</div>
|
||||
<div
|
||||
class="btn btn-immortal sub-header"
|
||||
v-if="
|
||||
activeToken.allowance > 0 &&
|
||||
activeToken.allowance >= tokenNumber &&
|
||||
(state === 1 || state === 4)
|
||||
"
|
||||
@click="sacrificeToken(tokenNumber)"
|
||||
>
|
||||
Sacrifice 🩸
|
||||
</div>
|
||||
<div
|
||||
class="btn btn-immortal sub-header"
|
||||
v-if="
|
||||
(!activeToken.allowance || activeToken.allowance < tokenNumber) &&
|
||||
(state === 1 || state === 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">
|
||||
<loading-component></loading-component>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="btn btn-immortal sub-header" @click="showPanel = true">Connect</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, watch, inject, computed } from "vue";
|
||||
import { ref, defineProps, watch, inject, nextTick } from "vue";
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { useMemeburnerStore } from "@/stores/memeburner";
|
||||
import StakeComponentV1 from "@/components/StakeComponentV1.vue";
|
||||
import LoadingComponent from "@/components/LoadingComponent.vue";
|
||||
import TokenInput from "@/components/TokenInput.vue";
|
||||
|
||||
import { storeToRefs } from "pinia";
|
||||
import { waitForTransaction } from "@wagmi/core";
|
||||
@@ -169,7 +170,7 @@ const walletStore = useWalletStoreV2();
|
||||
// const { connected } = storeToRefs(walletStore);
|
||||
|
||||
const tokenStore = useTokenStore();
|
||||
const { activeToken, loading } = storeToRefs(tokenStore);
|
||||
const { activeToken } = storeToRefs(tokenStore);
|
||||
|
||||
const memeburnerStore = useMemeburnerStore();
|
||||
|
||||
@@ -187,6 +188,7 @@ const props = defineProps({
|
||||
|
||||
const tokenNumber = ref(null);
|
||||
const output = ref(0);
|
||||
const loading = ref(false);
|
||||
/**
|
||||
* state 0 enter amount
|
||||
* state 1 rdy to go
|
||||
@@ -227,8 +229,8 @@ async function approveToken(amount) {
|
||||
const data = await waitForTransaction({
|
||||
hash: hash,
|
||||
});
|
||||
activeToken.value.allowance = await tokenStore.allowance();
|
||||
console.log("data", data);
|
||||
activeToken.value.allowance = await tokenStore.allowance();
|
||||
state.value = 1;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
@@ -239,21 +241,25 @@ async function approveToken(amount) {
|
||||
}
|
||||
|
||||
async function getRewardsFor(value) {
|
||||
if (!value || isNaN(value)) {
|
||||
output.value = 0;
|
||||
state.value = 0;
|
||||
return;
|
||||
loading.value = true;
|
||||
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))
|
||||
);
|
||||
state.value = 1;
|
||||
output.value = rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
|
||||
tokenStore.activeToken.rewards = output.value;
|
||||
return output.value;
|
||||
} catch (error) {
|
||||
console.log("error", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
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) {
|
||||
@@ -271,88 +277,89 @@ async function addTokens(value) {
|
||||
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)
|
||||
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
|
||||
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
|
||||
|
||||
.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)
|
||||
.sacrifice-token
|
||||
border-radius: 16px
|
||||
padding: 16px
|
||||
font-size: 16px
|
||||
gap: 16px
|
||||
.sacrifice-fees-img
|
||||
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
|
||||
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
|
||||
gap: 16px
|
||||
.sacrifice-fees-img
|
||||
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
|
||||
width: 100%
|
||||
@media (min-width: 992px)
|
||||
gap: 32px
|
||||
.sacrifice-from-wrapper,.sacrifice-to-wrapper
|
||||
.sacrifice-from-wrapper
|
||||
.sarcrifice-from-input
|
||||
display: flex
|
||||
margin-bottom: 8px
|
||||
// height: 60px
|
||||
@media (min-width: 992px)
|
||||
height: 60px
|
||||
input
|
||||
width: 100%
|
||||
height: 45px
|
||||
@@ -370,7 +377,7 @@ async function addTokens(value) {
|
||||
border-radius: 50%
|
||||
pointer-events: none
|
||||
@media (min-width: 992px)
|
||||
height: 83px
|
||||
height: 100%
|
||||
width: auto
|
||||
.sacrifice-to-output
|
||||
flex: 1 1 auto
|
||||
@@ -388,10 +395,14 @@ async function addTokens(value) {
|
||||
gap: 6px
|
||||
.sacrifice-adder-step
|
||||
font-size: 14px
|
||||
background: var(--grey, #858585)
|
||||
color: var(--midnight-black, #0F0F0F)
|
||||
@media (min-width: 992px)
|
||||
font-size: 16px
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: var(--secondary)
|
||||
background-color: var(--grey-light)
|
||||
cursor: pointer
|
||||
// .sacrifice-adder-balance
|
||||
// margin-left: auto
|
||||
@@ -404,6 +415,22 @@ async function addTokens(value) {
|
||||
// color: darken(red, 10%)
|
||||
// transform: scale(1.1)
|
||||
// transition: transform 0s
|
||||
.sacrifice-to-wrapper
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 24px
|
||||
.sarcrifice-to-input
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
.sacrifice-logo
|
||||
img
|
||||
width: 45px
|
||||
height: 45px
|
||||
border-radius: 50%
|
||||
pointer-events: none
|
||||
@media (min-width: 992px)
|
||||
height: 82px
|
||||
width: 82px
|
||||
.sacrificed-info
|
||||
display: flex
|
||||
padding: 8px 24px
|
||||
|
||||
Reference in New Issue
Block a user