update cycle
This commit is contained in:
EmberSpirit
+116
-106
@@ -1,120 +1,98 @@
|
||||
<template>
|
||||
<swiper class="blood-chart-wrapper" :slidesPerView="'auto'" :centeredSlides="false" :spaceBetween="35">
|
||||
<swiper-slide class="blood-chart-element" v-for="coin in token" :key="coin.name">
|
||||
<div class="blood-chart-element-header">
|
||||
<div class="blood-chart-coin">
|
||||
<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
|
||||
</div>
|
||||
<div class="blood-chart-coin-title">{{ coin.name }}</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-body">
|
||||
<div class="blood-chart-bar-wrapper">
|
||||
<svg
|
||||
class="waves"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 24 150 28"
|
||||
preserveAspectRatio="none"
|
||||
shape-rendering="auto"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="gentle-wave"
|
||||
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||
/>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
|
||||
<div class="wrapper">
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
</div>
|
||||
<div class="blood-chart-bar-percentage">{{ getPercentage(coin.amount, props.data.goal) }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-footer">
|
||||
<div class="blood-chart-amount">
|
||||
<!-- {{ compactNumber(coin.amount) }} -->
|
||||
{{ coin.amount.toFixed(2) }}
|
||||
</div>
|
||||
<div class="blood-chart-coin">$BLOOD</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<!-- <div class="blood-chart-wrapper" v-if="props.data">
|
||||
<div class="blood-chart-element" v-for="coin in props.data.token" :key="coin.name">
|
||||
<div class="blood-chart-element-header">
|
||||
<div class="blood-chart-coin">
|
||||
<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
|
||||
</div>
|
||||
<div class="blood-chart-coin-title">{{ coin.name }}</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-body">
|
||||
<div class="blood-chart-bar-wrapper">
|
||||
<svg
|
||||
class="waves"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 24 150 28"
|
||||
preserveAspectRatio="none"
|
||||
shape-rendering="auto"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="gentle-wave"
|
||||
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||
/>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
|
||||
<div class="wrapper">
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
</div>
|
||||
<div class="blood-chart-bar-percentage">{{ getPercentage(coin.amount, props.data.goal) }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-footer">
|
||||
<div class="blood-chart-amount">
|
||||
{{ compactNumber(coin.amount) }}
|
||||
</div>
|
||||
<div class="blood-chart-coin">$BLOOD</div>
|
||||
</div>
|
||||
<div class="blood-chart-wrapper">
|
||||
<div class="blood-arrow left">
|
||||
<img
|
||||
class="swiper-arrow"
|
||||
src="/assets/img/blood-arrow-left.png"
|
||||
alt="left-arrow"
|
||||
@click="swiperInstance.slidePrev()"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<swiper
|
||||
class="blood-chart"
|
||||
:slidesPerView="3"
|
||||
:centeredSlides="false"
|
||||
:initial-slide="0"
|
||||
:spaceBetween="35"
|
||||
@swiper="onSwiper"
|
||||
>
|
||||
<swiper-slide class="blood-chart-element" v-for="coin in token" :key="coin.name">
|
||||
<div class="blood-chart-element-header">
|
||||
<div class="blood-chart-coin">
|
||||
<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
|
||||
</div>
|
||||
<div class="blood-chart-coin-title">{{ coin.name }}</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-body">
|
||||
<div class="blood-chart-bar-wrapper">
|
||||
<svg
|
||||
class="waves"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 24 150 28"
|
||||
preserveAspectRatio="none"
|
||||
shape-rendering="auto"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="gentle-wave"
|
||||
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||
/>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
|
||||
<div class="wrapper">
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
</div>
|
||||
<div class="blood-chart-bar-percentage">
|
||||
{{ getPercentage(coin.amount, props.data.goal) }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-footer">
|
||||
<div class="blood-chart-amount">
|
||||
<!-- {{ compactNumber(coin.amount) }} -->
|
||||
{{ coin.amount.toFixed(2) }}
|
||||
</div>
|
||||
<div class="blood-chart-coin">$BLOOD</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
|
||||
<!-- <button @click="swiperInstance.slidePrev()">left</button>
|
||||
<button @click="swiperInstance.slideNext()">left</button> -->
|
||||
</swiper>
|
||||
<div class="blood-arrow right">
|
||||
<img
|
||||
class="swiper-arrow"
|
||||
src="/assets/img/blood-arrow-right.png"
|
||||
alt="left-arrow"
|
||||
@click="swiperInstance.slideNext()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { getPercentage, compactNumber } from "@/helper/helper.js";
|
||||
import { useMemeburnerStore } from "@/stores/memeburner";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
|
||||
// Import Swiper styles
|
||||
import "swiper/css";
|
||||
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
// import required modules
|
||||
@@ -126,6 +104,12 @@ const props = defineProps({
|
||||
|
||||
console.log(props.data);
|
||||
|
||||
const swiperInstance = ref();
|
||||
|
||||
function onSwiper(swiper) {
|
||||
swiperInstance.value = swiper;
|
||||
}
|
||||
|
||||
function getImageUrl(url) {
|
||||
return new URL(url, import.meta.url).href;
|
||||
}
|
||||
@@ -153,6 +137,12 @@ const token = computed(() => props.data?.token);
|
||||
|
||||
<style lang="sass">
|
||||
.blood-chart-wrapper
|
||||
// margin-top: 56px
|
||||
display: flex
|
||||
justify-content: center
|
||||
// margin-bottom: 80px
|
||||
position: relative
|
||||
.blood-chart
|
||||
height: 750px
|
||||
width: 100%
|
||||
justify-content: space-around
|
||||
@@ -216,4 +206,24 @@ const token = computed(() => props.data?.token);
|
||||
|
||||
.swiper-slide
|
||||
width: 80px
|
||||
|
||||
.swiper-test
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
|
||||
.blood-arrow
|
||||
min-width: 30px
|
||||
&.left, &.right
|
||||
img
|
||||
height: 50px
|
||||
position: absolute
|
||||
top: 50%
|
||||
z-index: 0
|
||||
&.right
|
||||
img
|
||||
right: -5px
|
||||
&.left
|
||||
img
|
||||
left: -5px
|
||||
</style>
|
||||
|
||||
@@ -16,9 +16,17 @@
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition name="smooth">
|
||||
<stake-menu v-model="tokenNumber" @close="stakeMenu = false" :stake="stake" v-if="stakeMenu">
|
||||
<stake-menu
|
||||
v-model="tokenNumber"
|
||||
@close="stakeMenu = false"
|
||||
:amount="walletStore.memeToken?.unclaimedRewards"
|
||||
:stake="stake"
|
||||
v-if="stakeMenu"
|
||||
>
|
||||
<template v-slot:body>
|
||||
<div class="btn btn-immortal stake-button" @click="stakeBloodline">Stake & Claim Rest</div>
|
||||
<div class="btn btn-immortal stake-button" @click="stakeAndClaimAllRounds">
|
||||
Stake & Claim Rest
|
||||
</div>
|
||||
<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
|
||||
Cancel
|
||||
</div>
|
||||
@@ -69,6 +77,12 @@ function openUnstake() {
|
||||
stake.value = false;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
|
||||
async function stakeAndClaimAllRounds() {
|
||||
console.log("tokenNumber.value", tokenNumber.value);
|
||||
const coefficient = (10000 * tokenNumber.value) / walletStore.memeToken?.unclaimedRewards;
|
||||
var result = await rewardLockerStore.stakeAndClaimAllRounds(coefficient);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
|
||||
@@ -69,6 +69,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</stake-component> -->
|
||||
<stake-component-v1></stake-component-v1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -81,6 +82,8 @@ import TokenNamePrice from "./TokenNamePrice.vue";
|
||||
import TokenLogo from "./TokenLogo.vue";
|
||||
import StakeComponent from "./StakeComponent.vue";
|
||||
import TokenInput from "./TokenInput.vue";
|
||||
import StakeComponentV1 from "@/components/StakeComponentV1.vue";
|
||||
|
||||
import { getAddressShortName, getblocky } from "@/helper/helper.js";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
|
||||
@@ -58,6 +58,8 @@ function testClick(e) {
|
||||
width: 100%
|
||||
height: 100%
|
||||
padding: 24px 24px 16px 24px
|
||||
overflow: scroll
|
||||
height: calc( 100svh - 82px )
|
||||
@media (min-width: 992px)
|
||||
width: 300px
|
||||
.slideout-icon
|
||||
|
||||
@@ -12,13 +12,10 @@
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<div class="connected-stake-buttons" v-if="!stakeMenu">
|
||||
<div class="btn" disabled v-if="roundStore.activeRound === roundStore.currentRound">Stake</div>
|
||||
<div class="btn" v-else @click="openStake">Stake</div>
|
||||
<div class="btn btn-immortal" disabled v-if="roundStore.currentRound === 1">Stake</div>
|
||||
<div class="btn btn-immortal" v-else @click="openStake">Stake</div>
|
||||
<div
|
||||
v-if="
|
||||
(walletStore.memeToken?.staked === 0 && !stakeonly) ||
|
||||
roundStore.activeRound === roundStore.currentRound
|
||||
"
|
||||
v-if="(walletStore.memeToken?.staked === 0 && !stakeonly) || roundStore.currentRound === 1"
|
||||
class="btn btn-immortal btn--disabled"
|
||||
>
|
||||
Unstake
|
||||
|
||||
@@ -53,13 +53,18 @@ const tokenStore = useTokenStore();
|
||||
const props = defineProps({
|
||||
stake: Boolean,
|
||||
modelValue: Number,
|
||||
amount: Number,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close", "update:modelValue"]);
|
||||
|
||||
async function addTokensPercent(value) {
|
||||
console.log("value", value);
|
||||
console.log(walletStore.memeToken.balanceOf);
|
||||
let amount;
|
||||
if (props.stake) {
|
||||
if (props.amount !== undefined || props.amount !== null) {
|
||||
amount = (props.amount * value) / 100;
|
||||
} else if (props.stake) {
|
||||
amount = (walletStore.memeToken.balanceOf * value) / 100;
|
||||
} else {
|
||||
amount = (walletStore.memeToken.staked * value) / 100;
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="claim-button">
|
||||
<!-- <div class="claim-button">
|
||||
<button v-if="activeRound === currentRound" class="btn btn-immortal" @click="router.push({ name: 'home' })">
|
||||
Sacrifice
|
||||
</button>
|
||||
@@ -60,6 +60,41 @@
|
||||
<div class="btn btn-immortal">Stake</div>
|
||||
</div>
|
||||
<div v-else class="btn btn-immortal btn--disabled">Nothing to claim</div>
|
||||
</div> -->
|
||||
<div class="claim-button">
|
||||
<template v-if="activeRound === currentRound">
|
||||
<button class="btn btn-immortal" @click="router.push({ name: 'home' })">Sacrifice</button>
|
||||
</template>
|
||||
<template v-else-if="getCurrentRoundData?.rewards_total > 0">
|
||||
<Transition name="smooth">
|
||||
<div class="connected-stake-buttons" v-show="!stakeMenu">
|
||||
<div class="btn btn-immortal" @click="claimRewards">Claim</div>
|
||||
<div class="btn btn-immortal" @click="openStake">Stake</div>
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition name="smooth">
|
||||
<stake-menu
|
||||
v-model="tokenNumber"
|
||||
@close="stakeMenu = false"
|
||||
:stake="stake"
|
||||
:amount="getCurrentRoundData?.rewards_total"
|
||||
v-if="stakeMenu"
|
||||
>
|
||||
<template v-slot:body>
|
||||
<div class="btn btn-immortal stake-button" @click="stakeAndClaim">Stake & Claim Rest</div>
|
||||
<div
|
||||
class="btn transparent small-text cancel-button text-center"
|
||||
@click="stakeMenu = false"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
</template>
|
||||
</stake-menu>
|
||||
</Transition>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="btn btn-immortal btn--disabled">Nothing to claim</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -72,6 +107,7 @@ import { useRewardLockerStore } from "@/stores/rewardlocker";
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
import { useRoundsStore } from "@/stores/rounds";
|
||||
import { useRouter } from "vue-router";
|
||||
import StakeMenu from "@/components/StakeMenu.vue";
|
||||
|
||||
const clanRewards = ref(0);
|
||||
const rewards = ref(0);
|
||||
@@ -84,6 +120,22 @@ const router = useRouter();
|
||||
|
||||
const { activeRound, currentRound, getCurrentRoundData } = storeToRefs(roundStore);
|
||||
|
||||
const stakeMenu = ref(false);
|
||||
const stake = ref(null);
|
||||
const tokenNumber = ref(null);
|
||||
|
||||
async function stakeAndClaim() {
|
||||
console.log(tokenNumber.value);
|
||||
console.log(getCurrentRoundData.value.rewards_total);
|
||||
const coefficient = (10000 * tokenNumber.value) / getCurrentRoundData.value.rewards_total;
|
||||
var result = await rewardLockerStore.stakeAndClaimRound(coefficient, roundStore.activeRound);
|
||||
}
|
||||
|
||||
function openStake() {
|
||||
stake.value = true;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
|
||||
onMounted(async () => {});
|
||||
|
||||
async function claimRewards() {
|
||||
|
||||
Reference in New Issue
Block a user