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

update cycle

Browse Source
This commit is contained in:
EmberSpirit
2023-09-17 17:16:09 +02:00
parent 02182c8128
commit 9330168af2
15 changed files with 273 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BloodChart.vue
+116 -106
View File
@@ -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>
src/components/ClaimComponent.vue
+16 -2
View File
@@ -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">
src/components/ConnectWallet.vue
+3
View File
@@ -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";
src/components/SlideoutPanel.vue
+2
View File
@@ -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
src/components/StakeComponentV1.vue
+3 -6
View File
@@ -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
src/components/StakeMenu.vue
+6 -1
View File
@@ -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;
src/components/TokenClaim.vue
+53 -1
View File
@@ -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() {
src/helper/helper.js
-3
View File
@@ -4,9 +4,6 @@ export function getImageUrl(url) {
}
export function getPercentage(amount, goal) {
console.log("amount", amount);
console.log("goal", goal);
return ((Number(amount) / Number(goal)) * 100).toFixed(2);
}
src/stores/rewardlocker.js
+58 -31
View File
@@ -62,9 +62,6 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
async claim(round) {
console.log("claim");
const walletStore = useWalletStoreV2();
// return await this.contract.methods.claim(round).call();
console.log(this.contract.methods.claim(round));
// return await this.contract.methods.claim(round).send({from: walletStore.address, to: this.contractAddress});
return await this.contract.write.claim([round]);
},
async claimAll() {
@@ -90,44 +87,74 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
},
async orderUnstake() {
try {
return await this.contract.write.orderUnstake();
} catch (error) {
return;
}
return await this.contract.write.orderUnstake();
} catch (error) {
return;
}
},
async unstake(unstakeRound) {
return await this.contract.write.unstake([unstakeRound]);
},
async stakeBloodline(tokenNumber) {
console.log("tokenNumber", tokenNumber);
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
},
async stakeBloodline(tokenNumber) {
console.log("tokenNumber", tokenNumber);
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const fromAddress = walletStore.address;
const spender = this.config.contractAddress;
const deadline = Date.now() + 20 * 60;
const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
const value = (tokenNumber * Math.pow(10, decimals)).toString();
const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
console.log("nonce", nonce);
const { types, message, domain, primaryType } = createPermitObject(fromAddress, spender, nonce, deadline, value);
const fromAddress = walletStore.address;
const spender = this.config.contractAddress;
const deadline = Date.now() + 20 * 60;
const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
const value = (tokenNumber * Math.pow(10, decimals)).toString();
const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
console.log("nonce", nonce);
const { types, message, domain, primaryType } = createPermitObject(
fromAddress,
spender,
nonce,
deadline,
value
);
const signature = await signTypedData({
domain: domain,
message: message,
primaryType: primaryType,
types: types,
});
const signature = await signTypedData({
domain: domain,
message: message,
primaryType: primaryType,
types: types,
});
const { r, s, v } = getSignatureRSV(signature);
const { r, s, v } = getSignatureRSV(signature);
const hash = await this.contract.write.stakeToBeSecured([value, deadline, v, r, s]);
console.log("hash", hash);
const hash = await this.contract.write.stakeToBeSecured([value, deadline, v, r, s]);
console.log("hash", hash);
const data = await waitForTransaction({
const data = await waitForTransaction({
hash: hash,
});
console.log("data", data);
}
},
async stakeAndClaimRound(stakeCoefficient, round) {
// stakeCoefficient 25% = 2500, 50% = 5000
const tokenStore = useTokenStore();
const addresses = tokenStore.sacrificeToken.map((obj) => obj.contractAddress);
const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, [round], addresses]);
const data = await waitForTransaction({
hash: hash,
});
const walletStore = useWalletStoreV2();
await walletStore.loadWalletData();
// todo reload roundData and wallet data
},
async stakeAndClaimAllRounds(stakeCoefficient) {
console.log("stakeAndClaimAllRounds");
const tokenStore = useTokenStore();
const roundsStore = useRoundsStore();
const rounds = await roundsStore.getFinshedRoundNumbers();
const addresses = tokenStore.sacrificeToken.map((obj) => obj.contractAddress);
console.log({ stakeCoefficient, rounds, addresses });
const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, rounds, addresses]);
// todo reload roundData and wallet data
const walletStore = useWalletStoreV2();
await walletStore.loadWalletData();
},
},
});
src/stores/rounds.js
+7 -8
View File
@@ -15,7 +15,6 @@ export const useRoundsStore = defineStore("rounds", {
getters: {
getRoundWinner() {
const goal = this.getCurrentRoundData?.goal;
console.log("goal", goal);
if (!goal) {
return;
}
@@ -61,9 +60,10 @@ export const useRoundsStore = defineStore("rounds", {
const element = data[index];
if (!this.rounds[index]) {
this.rounds[index] = {};
}
this.rounds[index].round = index + 1;
this.rounds[index].rewards_total = element.result;
}
console.log("vor Fehler");
// this.rounds[index].round = index + 1;
// this.rounds[index].rewards_total = element.result;
}
},
async updateCurrentRound(sacrificedToken) {
@@ -97,7 +97,6 @@ export const useRoundsStore = defineStore("rounds", {
}
var goal = await memeBurnerStore.getGoal(roundNumber);
console.log("goal", goal);
var tokenArray = [];
var rewards_clan = 0;
var rewards_sacrifice = 0;
@@ -106,11 +105,11 @@ export const useRoundsStore = defineStore("rounds", {
for (let index = 0; index < data.length; index++) {
var tokenData = {};
const token = tokenStore.token[index];
var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(
var coefficent = await rewardLockerStore.getSacrificedTokenCoefficient(
roundNumber,
token.contractAddress
);
console.log("testcoef", testcoef);
console.log("coefficent", coefficent);
tokenData.name = token.name;
tokenData.contractAddress = token.contractAddress;
@@ -128,7 +127,7 @@ export const useRoundsStore = defineStore("rounds", {
const sacrificeClanReward = Number(rewardData[index].result[1]);
console.log("stakeReward", stakeReward);
console.log("sacrificeClanReward", sacrificeClanReward);
const clanwin = (Number(testcoef) / 10000 - 1) * sacrificeClanReward;
const clanwin = (Number(coefficent) / 10000 - 1) * sacrificeClanReward;
console.log("clanwin", clanwin);
const sacrificeRewards = Number(sacrificeClanReward) - clanwin;
console.log("sacrificeRewards", sacrificeRewards);
src/views/CycleView.vue
+7 -3
View File
@@ -95,9 +95,7 @@
<div class="bloodline-container" v-else>
<div class="bloodline-border purple">Get up to +100% Clan Bonus <br />on your sacrifice.</div>
</div>
<div class="blood-chart">
<blood-chart :data="roundsStore.rounds[roundsStore.activeRound]"></blood-chart>
</div>
<blood-chart :data="roundsStore.rounds[roundsStore.activeRound]"></blood-chart>
</div>
</div>
</div>
@@ -267,4 +265,10 @@ function timeBetweenDates(expirationTimestamp) {
opacity: 0.3
.cycle-winner-name
font-size: 16px
.bloodline-clan
display: flex
flex-direction: column
gap: 16px
</style>
src/views/HomeView.vue
-6
View File
@@ -63,12 +63,6 @@ const isMobile = inject("isMobile");
</template>
<style lang="sass">
.blood-chart
margin-top: 56px
display: flex
justify-content: center
margin-bottom: 80px
.header-text
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
font-size: 32px
src/views/ProfileView.vue
+2 -1
View File
@@ -219,7 +219,8 @@ onMounted(async () => {
console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound;
}
await roundsStore.loadRewardsRounds();
//brauche ich das?
// await roundsStore.loadRewardsRounds();
console.log("roundsStore.rounds", roundsStore.rounds);
});