merge development master
This commit is contained in:
EmberSpirit
+13
-11
@@ -72,18 +72,20 @@ onMounted(async () => {
|
||||
window.addEventListener("resize", handleWindowSizeChange);
|
||||
handleWindowSizeChange();
|
||||
|
||||
await walletStore.init();
|
||||
// initContracts
|
||||
// await walletStore.init();
|
||||
// await tokenStore.initV2();
|
||||
// await memeBurnerStore.init();
|
||||
// await rewardLockerStore.init();
|
||||
// await memeBurnerStore.init();
|
||||
// await multiCallStore.init();
|
||||
//Memeburner Contract
|
||||
|
||||
const account = getAccount();
|
||||
const network = getNetwork();
|
||||
console.log("netWork", network);
|
||||
console.log("account", account);
|
||||
if (account.address) {
|
||||
walletStore.address = account.address;
|
||||
walletStore.connected = true;
|
||||
var walletClient123 = await getWalletClient();
|
||||
console.log("walletClient123123123", walletClient123);
|
||||
}
|
||||
//init
|
||||
// roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
|
||||
// console.log("roundsStore.currentRound", roundsStore.currentRound);
|
||||
// roundsStore.activeRound = roundsStore.currentRound;
|
||||
await roundsStore.fillRound(roundsStore.activeRound);
|
||||
|
||||
//events
|
||||
eventWatch.value = watchAccount(async (account) => {
|
||||
|
||||
@@ -41,7 +41,9 @@ onBeforeUnmount(() => {
|
||||
<img alt="logo" class="logo" src="/assets/img/vampir.png" />
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="navbar-text">Bloodline</div>
|
||||
<div class="navbar-text">
|
||||
<router-link to="/">Bloodline</router-link>
|
||||
</div>
|
||||
<div class="navbar-center" v-if="!isMobile">
|
||||
<div class="navbar-social-links">
|
||||
<div class="social-bloodline-badge">
|
||||
@@ -117,6 +119,9 @@ header
|
||||
line-height: 73.107px
|
||||
@media (min-width: 992px)
|
||||
font-size: 64px
|
||||
a
|
||||
text-decoration: none
|
||||
color: white
|
||||
.navbar-center
|
||||
display: flex
|
||||
margin-left: auto
|
||||
|
||||
+7
-3
@@ -14,12 +14,14 @@ import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
|
||||
/* import specific icons */
|
||||
import { faArrowDown, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faArrowRightToBracket, faArrowRightFromBracket } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
/* add icons to the library */
|
||||
library.add(
|
||||
faArrowDown,
|
||||
faArrowDown,
|
||||
faArrowRight,
|
||||
faDiscord,
|
||||
faTwitter,
|
||||
faTelegram,
|
||||
@@ -30,7 +32,9 @@ library.add(
|
||||
faBars,
|
||||
faAnglesRight,
|
||||
faArrowRightToBracket,
|
||||
faArrowRightFromBracket
|
||||
faArrowRightFromBracket,
|
||||
faChevronDown,
|
||||
faChevronUp
|
||||
);
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { useContractStore } from "@/stores/contracts";
|
||||
import { useMemeburnerStore } from "@/stores/memeburner";
|
||||
import { useRewardLockerStore } from "@/stores/rewardlocker";
|
||||
import { useMultiCallStore } from "@/stores/multicall";
|
||||
import { useRoundsStore } from "@/stores/rounds";
|
||||
|
||||
import {
|
||||
getAccount,
|
||||
} from "@wagmi/core";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@@ -27,7 +38,38 @@ const router = createRouter({
|
||||
name: "Wagmi",
|
||||
component: () => import("../views/WagmiView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/profile",
|
||||
name: "Profile",
|
||||
component: () => import("../views/ProfileView.vue"),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
router.beforeEach(async (to, from) => {
|
||||
//init
|
||||
const tokenStore = useTokenStore();
|
||||
const memeBurnerStore = useMemeburnerStore();
|
||||
const rewardLockerStore = useRewardLockerStore();
|
||||
const roundsStore = useRoundsStore();
|
||||
const walletStore = useWalletStoreV2();
|
||||
|
||||
if (!walletStore.publicClient) {
|
||||
await walletStore.init();
|
||||
await tokenStore.initV2();
|
||||
await memeBurnerStore.init();
|
||||
await rewardLockerStore.init();
|
||||
await memeBurnerStore.init();
|
||||
|
||||
|
||||
if (!roundsStore.currentRound) {
|
||||
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
|
||||
console.log("roundsStore.currentRound", roundsStore.currentRound);
|
||||
roundsStore.activeRound = roundsStore.currentRound;
|
||||
}
|
||||
}
|
||||
// initContracts
|
||||
return true;
|
||||
});
|
||||
|
||||
export default router
|
||||
|
||||
+62
-33
@@ -3,6 +3,7 @@ import { useMemeburnerStore } from "./memeburner";
|
||||
import { useTokenStore } from "./tokens";
|
||||
import { useRewardLockerStore } from "./rewardlocker";
|
||||
import { useWalletStoreV2 } from "./walletV2";
|
||||
import { multicall } from "@wagmi/core";
|
||||
|
||||
|
||||
export const useRoundsStore = defineStore("rounds", {
|
||||
@@ -21,6 +22,37 @@ export const useRoundsStore = defineStore("rounds", {
|
||||
async init() {
|
||||
//fill initial round
|
||||
},
|
||||
async loadRewardsRounds() {
|
||||
const walletStore = useWalletStoreV2();
|
||||
const rewardLockerStore = useRewardLockerStore();
|
||||
|
||||
console.log("this.currentRound", this.currentRound);
|
||||
const contracts = []
|
||||
for (let index = 0; index < this.currentRound; index++) {
|
||||
console.log("load round: " + index);
|
||||
// await this.fillRound(index)
|
||||
|
||||
contracts.push({
|
||||
...rewardLockerStore.contract,
|
||||
functionName: "getTotalRewardsOf",
|
||||
args: [walletStore.address, [index +1]],
|
||||
});
|
||||
}
|
||||
|
||||
const data = await multicall({
|
||||
contracts,
|
||||
});
|
||||
console.log("data123abc", data);
|
||||
// var test = await rewardLockerStore.getTotalRewardsOf(walletStore.address, rounds)
|
||||
for (let index = 0; index < data.length; index++) {
|
||||
const element = data[index];
|
||||
if (!this.rounds[index]) {
|
||||
this.rounds[index] = {};
|
||||
}
|
||||
this.rounds[index].round = index + 1
|
||||
this.rounds[index].rewards_total = element.result
|
||||
}
|
||||
},
|
||||
async updateCurrentRound(sacrificedToken) {
|
||||
const tokenStore = useTokenStore();
|
||||
const memeBurnerStore = useMemeburnerStore();
|
||||
@@ -30,7 +62,7 @@ export const useRoundsStore = defineStore("rounds", {
|
||||
this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex].result[1];
|
||||
|
||||
},
|
||||
async fillRound() {
|
||||
async fillRound(roundNumber) {
|
||||
console.log("fillRound");
|
||||
const memeBurnerStore = useMemeburnerStore();
|
||||
const tokenStore = useTokenStore();
|
||||
@@ -40,26 +72,25 @@ export const useRoundsStore = defineStore("rounds", {
|
||||
// if (this.activeRound === this.currentRound) {
|
||||
// console.log("activeRound is not completed");
|
||||
// } else
|
||||
if (!this.rounds[this.activeRound]) {
|
||||
console.log("round not filled --> fill round");
|
||||
console.log("vor error");
|
||||
var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
|
||||
console.log("databla", data);
|
||||
let rewardData = null;
|
||||
if (walletStore.connected) {
|
||||
rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
|
||||
}
|
||||
console.log("rewardData123", rewardData);
|
||||
|
||||
var goal = await memeBurnerStore.getGoal(this.activeRound);
|
||||
console.log("goal", goal);
|
||||
if (!this.rounds[roundNumber]?.goal) {
|
||||
console.log("round not filled --> fill round");
|
||||
console.log("vor error");
|
||||
var data = await memeBurnerStore.getSacrificedRound(roundNumber)
|
||||
let rewardData = null;
|
||||
if (walletStore.connected) {
|
||||
rewardData = await rewardLockerStore.getRewardsForAllToken(roundNumber);
|
||||
}
|
||||
console.log("rewardData123", rewardData);
|
||||
|
||||
var goal = await memeBurnerStore.getGoal(roundNumber);
|
||||
console.log("goal", goal);
|
||||
var tokenArray = []
|
||||
var rewards_clan = 0
|
||||
var rewards_sacrifice = 0
|
||||
for (let index = 0; index < data.length; index++) {
|
||||
var tokenData = {};
|
||||
const token = tokenStore.token[index];
|
||||
var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(this.activeRound, token.contractAddress);
|
||||
var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(roundNumber, token.contractAddress);
|
||||
|
||||
|
||||
|
||||
@@ -69,33 +100,31 @@ export const useRoundsStore = defineStore("rounds", {
|
||||
tokenData.vampname = token.vamp.name;
|
||||
tokenData.amount = data[index].result[1];
|
||||
tokenData.getAmountToReachGoal= await memeBurnerStore.getAmountToReachGoal(token.contractAddress);
|
||||
if (this.currentRound !== this.activeRound && walletStore.connected) {
|
||||
if (this.currentRound !== roundNumber && walletStore.connected) {
|
||||
const clanwin = (Number(testcoef) / 10000 - 1) * Number(rewardData[index].result);
|
||||
const sacrificeRewards = Number(rewardData[index].result) - clanwin;
|
||||
const sacrificeRewards = Number(rewardData[index].result) - clanwin;
|
||||
|
||||
tokenData.rewards_ges = BigInt(rewardData[index].result);
|
||||
tokenData.rewards_clan = BigInt(clanwin);
|
||||
tokenData.rewards_sacrifice = BigInt(sacrificeRewards);
|
||||
|
||||
rewards_clan = rewards_clan + (clanwin / Math.pow(10, token.decimals));
|
||||
rewards_sacrifice =
|
||||
rewards_sacrifice =
|
||||
rewards_sacrifice + sacrificeRewards / Math.pow(10, token.decimals);
|
||||
}
|
||||
tokenArray.push(tokenData);
|
||||
}
|
||||
const goalInBLD = await memeBurnerStore.getGoalInBLD(this.activeRound);
|
||||
console.log("goalInBLD", goalInBLD);
|
||||
console.log("tokenStore.memeToken.decimals", tokenStore.memeToken.decimals);
|
||||
this.rounds[this.activeRound] = {
|
||||
goal: goal[0],
|
||||
goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
|
||||
expirationTimestamp: goal[1],
|
||||
rewards_clan: BigInt(rewards_clan),
|
||||
rewards_sacrifice: BigInt(rewards_sacrifice),
|
||||
rewards_total: BigInt(rewards_clan + rewards_sacrifice),
|
||||
token: tokenArray,
|
||||
};
|
||||
console.log("this.rounds[this.activeRound]", this.rounds[this.activeRound]);
|
||||
tokenArray.push(tokenData);
|
||||
}
|
||||
const goalInBLD = await memeBurnerStore.getGoalInBLD(roundNumber);
|
||||
this.rounds[roundNumber] = {
|
||||
goal: goal[0],
|
||||
goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
|
||||
expirationTimestamp: goal[1],
|
||||
rewards_clan: BigInt(rewards_clan),
|
||||
rewards_sacrifice: BigInt(rewards_sacrifice),
|
||||
rewards_total: BigInt(rewards_clan + rewards_sacrifice),
|
||||
token: tokenArray,
|
||||
};
|
||||
console.log("this.rounds[roundNumber]", this.rounds[roundNumber]);
|
||||
} else {
|
||||
console.log("round already filled");
|
||||
}
|
||||
|
||||
+28
-2
@@ -82,8 +82,34 @@ export const useWalletStoreV2 = defineStore("walletV2", {
|
||||
],
|
||||
publicClient,
|
||||
webSocketPublicClient,
|
||||
});
|
||||
this.publicClient = publicClient;
|
||||
});
|
||||
this.publicClient = publicClient;
|
||||
|
||||
console.log("hier123");
|
||||
const account = getAccount();
|
||||
|
||||
console.log("account123abc", account);
|
||||
if (account.address) {
|
||||
this.address = account.address;
|
||||
this.connected = true;
|
||||
}
|
||||
// await this.isConnected();
|
||||
// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||
// if (this.connected) {
|
||||
// const web3 = new Web3(window.ethereum);
|
||||
// this.web3 = markRaw(web3);
|
||||
// console.log("hierabc");
|
||||
// window.ethereum.on("accountsChanged", async (data) => {
|
||||
// console.log("accountsChanged", data);
|
||||
// console.log("data", data);
|
||||
// if (data.length > 0) {
|
||||
// this.address = data[0];
|
||||
// this.connected = true;
|
||||
// } else {
|
||||
// this.address = null;
|
||||
// this.connected = false;
|
||||
// }
|
||||
// });
|
||||
|
||||
console.log("this.config", this.config);
|
||||
const walletClient = await getWalletClient();
|
||||
|
||||
+36
-13
@@ -17,6 +17,7 @@ const days = ref(null);
|
||||
const hours = ref(null);
|
||||
const minutes = ref(null);
|
||||
const seconds = ref(null);
|
||||
const openTutorial = ref(false);
|
||||
const timer = ref(null);
|
||||
const modules = [Navigation];
|
||||
const isMobile = inject("isMobile");
|
||||
@@ -24,14 +25,14 @@ const isMobile = inject("isMobile");
|
||||
async function prevSlide() {
|
||||
if (activeRound.value > 1) {
|
||||
activeRound.value--;
|
||||
await roundsStore.fillRound();
|
||||
await roundsStore.fillRound(activeRound.value);
|
||||
}
|
||||
}
|
||||
|
||||
async function nextSlide() {
|
||||
if (activeRound.value < currentRound.value) {
|
||||
activeRound.value++;
|
||||
await roundsStore.fillRound();
|
||||
await roundsStore.fillRound(activeRound.value);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -168,18 +169,31 @@ function timeBetweenDates() {
|
||||
</div>
|
||||
</section>
|
||||
<div class="container section-header-container">
|
||||
<h3>Tutorial</h3>
|
||||
When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
|
||||
<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
|
||||
</div>
|
||||
<section id="tokenomics" class="container">
|
||||
<div class="card">
|
||||
<h3>Tokenomics</h3>
|
||||
<p>100% clan owned. No team %, no pre-mine</p>
|
||||
<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
|
||||
<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
|
||||
<div class="tutorial-header">
|
||||
<div class="tutorial-headline">Tutorial</div>
|
||||
<div class="tutorial-more" @click="openTutorial = !openTutorial">
|
||||
<font-awesome-icon v-if="openTutorial" icon="chevron-up" />
|
||||
<font-awesome-icon v-else icon="chevron-down" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div v-if="openTutorial" class="tutorial-text">
|
||||
When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
|
||||
<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
|
||||
<section id="tokenomics" class="container">
|
||||
<div class="card">
|
||||
<h2>Tokenomics</h2>
|
||||
<p>100% clan owned. No team %, no pre-mine</p>
|
||||
<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
|
||||
<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
$BLOOD is 100%<br />
|
||||
community owned.<br />
|
||||
No team %, no pre-mine.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@@ -290,6 +304,15 @@ function timeBetweenDates() {
|
||||
margin-bottom: 64px
|
||||
@media (min-width: 992px)
|
||||
width: 655px
|
||||
.tutorial-header
|
||||
display: flex
|
||||
justify-content: center
|
||||
gap: 16px
|
||||
font-size: 24px
|
||||
margin-bottom: 40px
|
||||
.tutorial-text
|
||||
font-size: 18px
|
||||
|
||||
|
||||
.bloodline-wrapper
|
||||
.bloodline-inner
|
||||
|
||||
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="profile-header">Profile</div>
|
||||
<div class="profile-subheader">
|
||||
<div class="profile-subheader-logo"><img src="/assets/img/Icon.png" alt="" /></div>
|
||||
<div class="profile-subheader-address">0x12345...812d</div>
|
||||
</div>
|
||||
<div class="total-rewards-wrapper">
|
||||
<div class="total-rewards-headline">Total Rewards</div>
|
||||
<div class="total-rewards-inner">
|
||||
<div class="claim-wrapper">
|
||||
<div class="claim-inner">
|
||||
<div class="claim-header">Claimed</div>
|
||||
<div class="claim-body">TODO</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="claim-hr"></div>
|
||||
<div class="claim-wrapper">
|
||||
<div class="claim-inner">
|
||||
<div class="claim-header">Unclaimed</div>
|
||||
<div class="claim-body">TODO</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-rewards-buttons">
|
||||
<div class="btn btn-immortal">Stake</div>
|
||||
<div class="btn btn-immortal">Unstake</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="most-sacrificed-wrapper">
|
||||
<div class="most-sacrificed-inner">
|
||||
<div class="most-sacrificed-left">
|
||||
<div class="most-sacrificed-header">Bloodline Clan</div>
|
||||
<div class="most-sacrificed-subheader">Most sacrificed</div>
|
||||
</div>
|
||||
<div class="most-sacrificed-right">
|
||||
<div class="most-sacrificed-coin-logo">
|
||||
<img src="/assets/img/token/pepevamp.png" alt="" />
|
||||
</div>
|
||||
<div class="most-sacrificed-coin-name">$PEPE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-sacrificed-wrapper">
|
||||
<div class="total-sacrificed-inner">
|
||||
<div class="total-sacrificed-header">Total Sacrifice</div>
|
||||
<div class="total-sacrificed-coins">
|
||||
<div class="total-sacrificed-coin">
|
||||
<div class="total-sacrificed-coin-amount">1,2b</div>
|
||||
<div class="total-sacrificed-coin-logo">
|
||||
<img src="/assets/img/token/pepevamp.png" alt="" />
|
||||
</div>
|
||||
<div class="total-sacrificed-coin-name">$PEPE</div>
|
||||
</div>
|
||||
<div class="total-sacrificed-coin">
|
||||
<div class="total-sacrificed-coin-amount">139m</div>
|
||||
<div class="total-sacrificed-coin-logo">
|
||||
<img src="/assets/img/token/shibvamp.png" alt="" />
|
||||
</div>
|
||||
<div class="total-sacrificed-coin-name">$SHIB</div>
|
||||
</div>
|
||||
<div class="total-sacrificed-coin">
|
||||
<div class="total-sacrificed-coin-amount">0</div>
|
||||
<div class="total-sacrificed-coin-logo">
|
||||
<img src="/assets/img/token/elonvamp.png" alt="" />
|
||||
</div>
|
||||
<div class="total-sacrificed-coin-name">$ELON</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cycle-wrapper">
|
||||
<div class="cycle-inner">
|
||||
<div class="cycle-headline">Cycles</div>
|
||||
<div class="cycle-header">
|
||||
<div class="cycle-header-left">Cycle</div>
|
||||
<div class="cycle-header-right">Reward</div>
|
||||
</div>
|
||||
<div class="cycle-rounds">
|
||||
<div class="cycle-round" v-for="(round, index) in rounds" :key="index">
|
||||
<template v-if="round">
|
||||
<div class="cycle-round-inner">
|
||||
<div class="cycle-round-number">{{ round.round }}</div>
|
||||
<div class="cycle-round-badget" v-if="roundsStore.currentRound === round.round">
|
||||
active
|
||||
</div>
|
||||
<div class="cycle-round-reward">
|
||||
{{ Number(round.rewards_total / BigInt(Math.pow(10, 18))) }} $BDL
|
||||
</div>
|
||||
<div class="cycle-round-more" @click="openRound(index)">
|
||||
<font-awesome-icon
|
||||
v-if="openCycleElement && index === activeRound"
|
||||
icon="chevron-up"
|
||||
/>
|
||||
<font-awesome-icon v-else icon="chevron-down" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="cycle-round-detail" v-if="openCycleElement && index === activeRound">
|
||||
<div class="cycle-round-detail-inner">
|
||||
<div class="sacrifice-reward-wrapper">
|
||||
<div class="sacrifice-reward-inner">
|
||||
<div class="sacrifice-reward-header">
|
||||
<div class="sacrifice-reward-header-name">Sacrifice Reward</div>
|
||||
<div class="sacrifice-reward-header-amount">+2,000 $BDL</div>
|
||||
</div>
|
||||
<table class="sacrifice-coins">
|
||||
<tr class="sacrifice-coin">
|
||||
<td>2b PEPE</td>
|
||||
<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
|
||||
<td>1,500 $BDL</td>
|
||||
</tr>
|
||||
<tr class="sacrifice-coin">
|
||||
<td>10m SHIB</td>
|
||||
<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
|
||||
<td class="bloodline">500 $BDL</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-reward-wrapper">
|
||||
<div class="sacrifice-reward-inner">
|
||||
<div class="sacrifice-reward-header">
|
||||
<div class="sacrifice-reward-header-name">Staking Bonus</div>
|
||||
<div class="sacrifice-reward-header-amount">+1,000 $BDL</div>
|
||||
</div>
|
||||
<table class="sacrifice-coins">
|
||||
<tr class="sacrifice-coin">
|
||||
<td>Staked</td>
|
||||
<td class="arrow"></td>
|
||||
<td class="bloodline">1,000 $BDL</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-reward-wrapper">
|
||||
<div class="sacrifice-reward-inner">
|
||||
<div class="sacrifice-reward-header">
|
||||
<div class="sacrifice-reward-header-name">Competition Bonus</div>
|
||||
<div class="sacrifice-reward-header-amount">+200 $BDL</div>
|
||||
</div>
|
||||
<table class="sacrifice-coins">
|
||||
<div class="sacrifice-coin">
|
||||
<div><img src="/assets/img/winner.png" alt="" /></div>
|
||||
<div><img src="/assets/img/token/pepevamp.png" alt="" /></div>
|
||||
<div>$PEPE</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="bloodline">1,000 $BDL</div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { useRoundsStore } from "@/stores/rounds";
|
||||
|
||||
const roundsStore = useRoundsStore();
|
||||
|
||||
const activeRound = ref(null);
|
||||
const openCycleElement = ref(false);
|
||||
function openRound(index) {
|
||||
if (activeRound.value === index && openCycleElement.value) {
|
||||
openCycleElement.value = false;
|
||||
} else {
|
||||
openCycleElement.value = true;
|
||||
}
|
||||
activeRound.value = index;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
console.log("loadRounds");
|
||||
await roundsStore.loadRewardsRounds();
|
||||
console.log("roundsStore.rounds", roundsStore.rounds);
|
||||
});
|
||||
|
||||
const rounds = computed(() => roundsStore.rounds.reverse());
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.profile-header
|
||||
color: #FFF
|
||||
text-align: center
|
||||
font-size: 32px
|
||||
margin-bottom: 12px
|
||||
.profile-subheader
|
||||
display: flex
|
||||
justify-content: center
|
||||
gap: 12px
|
||||
align-items: center
|
||||
// .profile-subheader-logo
|
||||
margin-bottom: 24px
|
||||
.profile-subheader-address
|
||||
font-size: 12px
|
||||
.total-rewards-wrapper
|
||||
border-radius: 16px
|
||||
background: #202020
|
||||
padding: 8px
|
||||
.total-rewards-headline
|
||||
color: #FFF
|
||||
text-align: center
|
||||
font-size: 24px
|
||||
margin-bottom: 24px
|
||||
.total-rewards-inner
|
||||
border-radius: 16px
|
||||
border: 2px solid var(--grey, #858585)
|
||||
background: var(--dark-grey, #202020)
|
||||
padding: 8px 12px
|
||||
.claim-wrapper
|
||||
.claim-inner
|
||||
flex-direction: column
|
||||
margin-bottom: 16px
|
||||
.claim-header
|
||||
color: var(--white, #F9F9FA)
|
||||
font-size: 18px
|
||||
text-align: center
|
||||
margin-bottom: 16px
|
||||
.claim-hr
|
||||
background-color: #858585
|
||||
margin: 16px 0
|
||||
height: 1px
|
||||
.total-rewards-buttons
|
||||
display: flex
|
||||
text-align: center
|
||||
gap: 16px
|
||||
justify-content: space-between
|
||||
div
|
||||
flex: 1 1 auto
|
||||
font-size: 18px
|
||||
|
||||
|
||||
|
||||
.most-sacrificed-wrapper
|
||||
.most-sacrificed-inner
|
||||
padding: 8px
|
||||
border-radius: 16px
|
||||
border: 1px solid var(--grey, #858585)
|
||||
background: var(--dark-grey, #202020)
|
||||
gap: 34px
|
||||
display: flex
|
||||
justify-content: center
|
||||
.most-sacrificed-left
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
.most-sacrificed-header
|
||||
font-size: 24px
|
||||
.most-sacrificed-subheader
|
||||
font-size: 12px
|
||||
.most-sacrificed-right
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.most-sacrificed-coin-logo
|
||||
img
|
||||
width: 49px
|
||||
height: 49px
|
||||
border-radius: 50%
|
||||
|
||||
|
||||
|
||||
.total-sacrificed-wrapper
|
||||
background-color: var(--dark-grey, #202020)
|
||||
border-radius: 16px
|
||||
border: 1px solid var(--grey, #858585)
|
||||
padding: 8px
|
||||
.total-sacrificed-inner
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
gap: 16px
|
||||
.total-sacrificed-header
|
||||
font-size: 18px
|
||||
.total-sacrificed-coins
|
||||
display: flex
|
||||
gap: 27px
|
||||
.total-sacrificed-coin
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
text-align: center
|
||||
.total-sacrificed-coin-logo
|
||||
img
|
||||
height: 49px
|
||||
width: 49px
|
||||
border-radius: 50%
|
||||
|
||||
|
||||
|
||||
.cycle-wrapper
|
||||
margin-top: 24px
|
||||
.cycle-inner
|
||||
.cycle-headline
|
||||
font-size: 24px
|
||||
margin-bottom: 8px
|
||||
text-align: center
|
||||
.cycle-header
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
padding: 8px 16px
|
||||
font-size: 18px
|
||||
.cycle-rounds
|
||||
gap: 8px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.cycle-round
|
||||
border-radius: 16px
|
||||
border: 3px solid var(--grey, #858585)
|
||||
background: var(--dark-grey, #202020)
|
||||
padding: 12px
|
||||
min-height: 55px
|
||||
.cycle-round-inner
|
||||
display: flex
|
||||
font-size: 18px
|
||||
gap: 8px
|
||||
align-items: center
|
||||
// .cycle-round-number
|
||||
.cycle-round-badget
|
||||
border-radius: 14px
|
||||
border: 1px solid var(--grey, #858585)
|
||||
padding: 8px 16px
|
||||
height: 25px
|
||||
color: var(--grey, #858585)
|
||||
text-align: center
|
||||
font-size: 14px
|
||||
display: flex
|
||||
align-items: center
|
||||
margin-left: auto
|
||||
.cycle-round-reward
|
||||
margin-left: auto
|
||||
.cycle-round-more
|
||||
font-size: 16px
|
||||
.cycle-round-detail
|
||||
.cycle-round-detail-inner
|
||||
.sacrifice-reward-wrapper
|
||||
border-radius: 16px
|
||||
border: 0.5px solid var(--grey, #858585)
|
||||
margin-top: 12px
|
||||
.sacrifice-reward-inner
|
||||
padding: 8px 16px
|
||||
.sacrifice-reward-header
|
||||
display: flex
|
||||
font-size: 18px
|
||||
justify-content: space-between
|
||||
margin-bottom: 16px
|
||||
.sacrifice-coins
|
||||
margin-left: auto
|
||||
border-collapse: separate
|
||||
border-spacing: 0 12px
|
||||
.sacrifice-coin
|
||||
td
|
||||
text-align: right
|
||||
.arrow
|
||||
width: 14px
|
||||
padding: 0 16px
|
||||
</style>
|
||||
Reference in New Issue
Block a user