update cycleview, pageview + profileview
This commit is contained in:
EmberSpirit
Generated
+1363
-19786
File diff suppressed because it is too large
Load Diff
+69
-86
@@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, provide, ref } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import Navbar from "./components/Navbar.vue";
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
@@ -39,6 +40,9 @@ const netWorkEvent = ref(null);
|
||||
const memeSacrificedEvent = ref(null);
|
||||
const clientClientEvent = ref(null);
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
isMobile.value = isMobileFunc();
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", handleWindowSizeChange);
|
||||
@@ -65,10 +69,19 @@ function isMobileFunc() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function changeRoute(name) {
|
||||
console.log("route", route);
|
||||
console.log("router", router);
|
||||
router.push({
|
||||
name: name,
|
||||
});
|
||||
}
|
||||
provide("isMobile", isMobile);
|
||||
provide("showPanel", showPanel);
|
||||
|
||||
onMounted(async () => {
|
||||
console.log("onmounted");
|
||||
window.addEventListener("resize", handleWindowSizeChange);
|
||||
handleWindowSizeChange();
|
||||
|
||||
@@ -85,83 +98,6 @@ onMounted(async () => {
|
||||
// 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) => {
|
||||
console.log("account123", account);
|
||||
const publicClient = getPublicClient();
|
||||
console.log("publicClient", publicClient);
|
||||
|
||||
// {chainId: }
|
||||
console.log("walletClient", walletClient);
|
||||
if (account.address) {
|
||||
walletStore.address = account.address;
|
||||
walletStore.connected = true;
|
||||
let chainObject = walletStore.chain;
|
||||
if (!walletStore.chain) {
|
||||
const { chain, chains } = getNetwork();
|
||||
chainObject = chain;
|
||||
}
|
||||
var walletClient = await getWalletClient({
|
||||
account: account.address,
|
||||
chainId: chainObject.id,
|
||||
});
|
||||
walletStore.walletClient = walletClient;
|
||||
|
||||
// walletStore.getTokenBalances()
|
||||
|
||||
await memeBurnerStore.init();
|
||||
console.log("hierabc");
|
||||
await tokenStore.initV2();
|
||||
} else {
|
||||
walletStore.address = null;
|
||||
walletStore.connected = false;
|
||||
walletStore.walletClient = null;
|
||||
}
|
||||
});
|
||||
|
||||
netWorkEvent.value = watchNetwork((network) => {
|
||||
console.log("network123", network);
|
||||
if (network.chain) {
|
||||
walletStore.chain = network.chain;
|
||||
|
||||
clientClientEvent.value = watchWalletClient(
|
||||
{
|
||||
chainId: network.chain.id,
|
||||
},
|
||||
(walletClient) => {
|
||||
walletStore.walletClient = walletClient;
|
||||
console.log("wc123", walletClient);
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
memeSacrificedEvent.value = watchContractEvent(
|
||||
{
|
||||
address: memeBurnerStore.config.contractAddress,
|
||||
abi: memeBurnerStore.config.abi,
|
||||
eventName: "MemeSacrificed",
|
||||
},
|
||||
async (log) => {
|
||||
console.log("memeSacrificedEvent", log);
|
||||
const token = log[0].args.sacrificedToken;
|
||||
await roundsStore.updateCurrentRound(token);
|
||||
}
|
||||
);
|
||||
|
||||
await tokenStore.initV2();
|
||||
await memeBurnerStore.init();
|
||||
await rewardLockerStore.init();
|
||||
await memeBurnerStore.init();
|
||||
|
||||
// init
|
||||
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
|
||||
console.log("roundsStore.currentRound", roundsStore.currentRound);
|
||||
roundsStore.activeRound = roundsStore.currentRound;
|
||||
await roundsStore.fillRound(roundsStore.activeRound);
|
||||
await walletStore.loadWalletData();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -175,7 +111,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-inner">
|
||||
Follow Bloodline
|
||||
<div class="footer-headline">Follow Bloodline</div>
|
||||
<!-- $BLOOD is 100%<br />
|
||||
community owned.<br />
|
||||
No team %, no pre-mine. -->
|
||||
@@ -184,36 +120,83 @@ onMounted(async () => {
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-discord" />
|
||||
</div>
|
||||
<div class="social-bloodline-badge-text">Discord</div>
|
||||
</div>
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-telegram" />
|
||||
</div>
|
||||
<div class="social-bloodline-badge-text">Telegram</div>
|
||||
</div>
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-twitter" />
|
||||
</div>
|
||||
<div class="social-bloodline-badge-text">Twitter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-navigation-bar" v-if="isMobile">
|
||||
<div @click="changeRoute('home')" :class="{ active: route.name === 'home' }">
|
||||
<font-awesome-icon icon="fa-droplet" />
|
||||
</div>
|
||||
<div @click="changeRoute('cycle')" :class="{ active: route.name === 'cycle' }">
|
||||
<font-awesome-icon icon="fa-moon" />
|
||||
</div>
|
||||
<div @click="changeRoute('profile')" :class="{ active: route.name === 'profile' }">
|
||||
<font-awesome-icon icon="fa-person" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
.footer
|
||||
height: 450px
|
||||
min-height: 450px
|
||||
background-color: var(--grey2)
|
||||
height: auto
|
||||
background-color: var(--midnight-black)
|
||||
@media (min-width: 992px)
|
||||
height: 450px
|
||||
min-height: 450px
|
||||
.footer-inner
|
||||
padding: 24px
|
||||
padding: 16px 0 24px 0
|
||||
font-size: 24px
|
||||
text-align: center
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
align-items: center
|
||||
.footer-headline
|
||||
font-size: 16px
|
||||
.footer-social-links
|
||||
display: flex
|
||||
gap: 24px
|
||||
.social-bloodline-badge
|
||||
border-radius: 14px
|
||||
background: var(--grey, #858585)
|
||||
display: flex
|
||||
padding: 0px 16px
|
||||
align-items: center
|
||||
flex: 0 1 0
|
||||
color: black
|
||||
.social-bloodline-badge-icon
|
||||
font-size: 16px
|
||||
.main
|
||||
&.mobile
|
||||
&.no-scroll
|
||||
overflow: hidden
|
||||
|
||||
|
||||
.mobile-navigation-bar
|
||||
height: 72px
|
||||
width: 100%
|
||||
padding: 16px 48px
|
||||
border-radius: 24px 24px 0px 0px
|
||||
background: var(--grey, #858585)
|
||||
bottom: -1px
|
||||
position: fixed
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
color: black
|
||||
div
|
||||
font-size: 40px
|
||||
cursor: pointer
|
||||
&.active
|
||||
color: var(--purple)
|
||||
</style>
|
||||
|
||||
@@ -11,6 +11,8 @@
|
||||
border: 2px solid #000
|
||||
&.bloodline-border--variant1
|
||||
border: 4px solid var(--midnight-black)
|
||||
&.bloodline-border__thin
|
||||
border-width: 1px
|
||||
@media (min-width: 992px)
|
||||
padding: 24px 32px
|
||||
border: 4px solid #000
|
||||
@@ -18,6 +20,8 @@
|
||||
border-color: var(--purple)
|
||||
&.white
|
||||
border-color: var(--white)
|
||||
&.grey
|
||||
border-color: var(--grey, #858585)
|
||||
|
||||
.bloodline-badge
|
||||
padding: 8px 16px 8px 16px
|
||||
|
||||
@@ -30,7 +30,7 @@ $button-background-color: $black
|
||||
--tertiary-light: #{$tertiary-light}
|
||||
--tertiary-dark: #{$tertiary-dark}
|
||||
--white: #{#F9F9FA}
|
||||
--grey: #{$grey}
|
||||
--grey: #{#858585}
|
||||
--grey2: #{$grey2}
|
||||
--purple: #{$purple}
|
||||
--blood-color: #{$red}
|
||||
|
||||
@@ -9,28 +9,28 @@
|
||||
</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)}%`">
|
||||
<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="wrapper">
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
@@ -60,7 +60,7 @@ import { useMemeburnerStore } from "@/stores/memeburner";
|
||||
const memeBurnerStore = useMemeburnerStore();
|
||||
|
||||
const props = defineProps({
|
||||
data: Array,
|
||||
data: Object,
|
||||
});
|
||||
|
||||
console.log(props.data);
|
||||
@@ -126,23 +126,21 @@ function getImageUrl(url) {
|
||||
flex: 0 0 500px
|
||||
border-radius: 8px 8px 40px 40px
|
||||
text-align: left
|
||||
overflow: hidden
|
||||
.blood-chart-bar-wrapper
|
||||
height: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.blood-chart-bar
|
||||
.waves
|
||||
margin-top: auto
|
||||
.blood-chart-bar
|
||||
background-color: var(--blood-color)
|
||||
position: relative
|
||||
border-radius: 0 0 40px 40px
|
||||
.blood-chart-bar-percentage
|
||||
font-size: 14px
|
||||
text-align: center
|
||||
.waves
|
||||
position: absolute
|
||||
top: -10px
|
||||
width: 100%
|
||||
height: 10px
|
||||
|
||||
.blood-chart-element-footer
|
||||
margin-top: 32px
|
||||
text-align: center
|
||||
|
||||
@@ -45,25 +45,7 @@
|
||||
<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
|
||||
</div>
|
||||
</div>
|
||||
<div class="connected-stake bloodline-border white">
|
||||
<div class="connected-stake-headline">Staked</div>
|
||||
<div class="connected-stake-subheadline">Increase your sacrifice reward by staking.</div>
|
||||
<div class="connected-stake-body">
|
||||
<token-name-price
|
||||
:name="tokenStore.getToken(walletStore.memeToken?.contractAddress).name"
|
||||
:price="walletStore.memeToken.staked"
|
||||
></token-name-price>
|
||||
<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
|
||||
<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price>
|
||||
</div>
|
||||
<div class="connected-stake-buttons" v-if="!stakeMenu">
|
||||
<div class="btn btn-immortal" @click="openStake">Stake</div>
|
||||
<div class="btn btn-immortal" @click="openUnstake">Unstake</div>
|
||||
</div>
|
||||
<Transition>
|
||||
<stake-menu @close="stakeMenu = false" :stake="stake" v-if="stakeMenu"></stake-menu>
|
||||
</Transition>
|
||||
</div>
|
||||
<stake-component></stake-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -74,16 +56,15 @@ import { useTokenStore } from "@/stores/tokens";
|
||||
import Meme1Json from "@/assets/contracts/Meme1.json";
|
||||
import TokenNamePrice from "./TokenNamePrice.vue";
|
||||
import TokenLogo from "./TokenLogo.vue";
|
||||
import StakeComponent from "./StakeComponent.vue";
|
||||
import TokenInput from "./TokenInput.vue";
|
||||
import StakeMenu from "./StakeMenu.vue";
|
||||
import { getAddressShortName, getblocky } from "@/helper/helper.js";
|
||||
|
||||
import { disconnect } from "@wagmi/core";
|
||||
|
||||
const walletStore = useWalletStoreV2();
|
||||
const tokenStore = useTokenStore();
|
||||
const stakeMenu = ref(false);
|
||||
const stake = ref(null);
|
||||
|
||||
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||
|
||||
const fromAddress = ref(null);
|
||||
@@ -108,16 +89,6 @@ async function connectWallet(connector) {
|
||||
instance.parent.emit("update:modelValue", false);
|
||||
await walletStore.connectWallet(toRaw(connector));
|
||||
}
|
||||
|
||||
function openStake() {
|
||||
stake.value = true;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
|
||||
function openUnstake() {
|
||||
stake.value = false;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<div class="rewards-wrapper">
|
||||
<div class="rewards-header">
|
||||
<div class="rewards-header-title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div class="rewards-header-info">{{ props.info }}</div>
|
||||
<div class="rewards-headline">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div class="rewards-sacrifice-wrapper bloodline-border bloodline-border--variant1">
|
||||
<div class="rewards-inner">
|
||||
<div class="rewards-body">
|
||||
<div class="rewards-coin">$BLOOD</div>
|
||||
<div class="rewards-amount">{{ props.amount }}</div>
|
||||
@@ -26,29 +23,30 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.rewards-header
|
||||
font-size: 16px
|
||||
padding: 8px
|
||||
.rewards-wrapper
|
||||
display: flex
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.rewards-header-info
|
||||
margin-left: auto
|
||||
.rewards-sacrifice-wrapper, .rewards-clan-wrapper
|
||||
display: flex
|
||||
.rewards-body
|
||||
align-self: center
|
||||
.rewards-coin
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
.rewards-headline
|
||||
font-size: 16px
|
||||
.rewards-inner, .rewards-clan-wrapper
|
||||
display: flex
|
||||
padding: 0 8px 8px 8px
|
||||
border-bottom: 1px solid var(--grey, #858585)
|
||||
.rewards-body
|
||||
align-self: center
|
||||
.rewards-coin
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.rewards-amount
|
||||
text-align: left
|
||||
font-size: 24px
|
||||
.rewards-amount
|
||||
font-size: 24px
|
||||
margin-top: 8px
|
||||
@media (min-width: 992px)
|
||||
font-size: 40px
|
||||
margin-top: 0
|
||||
img
|
||||
margin-left: auto
|
||||
align-self: center
|
||||
margin-top: 8px
|
||||
@media (min-width: 992px)
|
||||
font-size: 40px
|
||||
margin-top: 0
|
||||
img
|
||||
margin-left: auto
|
||||
align-self: center
|
||||
</style>
|
||||
|
||||
@@ -51,7 +51,7 @@ function testClick(e) {
|
||||
right: 0
|
||||
bottom: unset
|
||||
&.open
|
||||
margin-bottom: -10vh
|
||||
margin-bottom: -82px
|
||||
@media (min-width: 992px)
|
||||
margin-right: 0
|
||||
.slideout-panel
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="connected-stake bloodline-border white">
|
||||
<div class="connected-stake-headline">Staked</div>
|
||||
<div class="connected-stake-subheadline">Increase your sacrifice reward by staking.</div>
|
||||
<div class="connected-stake-body">
|
||||
<token-name-price
|
||||
:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
|
||||
:price="walletStore.memeToken?.staked"
|
||||
></token-name-price>
|
||||
<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
|
||||
<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price>
|
||||
</div>
|
||||
<div class="connected-stake-buttons" v-if="!stakeMenu">
|
||||
<div class="btn btn-immortal" @click="openStake">Stake</div>
|
||||
<div class="btn btn-immortal" @click="openUnstake">Unstake</div>
|
||||
</div>
|
||||
<Transition>
|
||||
<stake-menu @close="stakeMenu = false" :stake="stake" v-if="stakeMenu"></stake-menu>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
|
||||
import { ref } from "vue";
|
||||
import StakeMenu from "./StakeMenu.vue";
|
||||
import TokenNamePrice from "./TokenNamePrice.vue";
|
||||
import TokenLogo from "./TokenLogo.vue";
|
||||
|
||||
const walletStore = useWalletStoreV2();
|
||||
const tokenStore = useTokenStore();
|
||||
|
||||
const stakeMenu = ref(false);
|
||||
const stake = ref(null);
|
||||
|
||||
function openStake() {
|
||||
stake.value = true;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
|
||||
function openUnstake() {
|
||||
stake.value = false;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass"></style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="claim bloodline-border">
|
||||
<div class="claim bloodline-border bloodline-border__thin grey">
|
||||
<div class="claim-headline">You Cycle Rewards</div>
|
||||
<div class="rewards-wrapper" v-if="!isMobile">
|
||||
<rewards-wrapper
|
||||
title="Sacrafice Reward"
|
||||
@@ -18,16 +19,25 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="rewards-list" v-else>
|
||||
<rewards-wrapper title="Total Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
|
||||
<rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
|
||||
<rewards-wrapper
|
||||
title="Total Stake Reward"
|
||||
title="Staking Bonus"
|
||||
coin="$BLOOD"
|
||||
amount="0"
|
||||
amount="0 todo"
|
||||
info="max: 312m"
|
||||
image="/assets/img/vampir.png"
|
||||
/>
|
||||
<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
|
||||
<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
|
||||
</div>
|
||||
<div class="rewards-total-wrapper">
|
||||
<div class="rewards-total-headline">Total Reward</div>
|
||||
<div class="rewards-total-inner bloodline-border bloodline-border--variant1">
|
||||
<div class="rewards-body">
|
||||
<div class="rewards-coin">$BLOOD</div>
|
||||
<div class="rewards-amount">todo</div>
|
||||
</div>
|
||||
<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="claim-button">
|
||||
<div v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div>
|
||||
@@ -72,10 +82,14 @@ async function claimRewards() {
|
||||
<style lang="sass">
|
||||
.claim
|
||||
display: flex
|
||||
padding: 32px 20px
|
||||
padding: 12px
|
||||
flex-direction: column
|
||||
@media (min-width: 992px)
|
||||
padding: 32px 40px
|
||||
.claim-headline
|
||||
font-size: 18px
|
||||
text-align: left
|
||||
margin-bottom: 16px
|
||||
.claim-button
|
||||
text-align: center
|
||||
margin: 32px 0
|
||||
@@ -89,4 +103,29 @@ async function claimRewards() {
|
||||
margin-bottom: 16px
|
||||
.rewards-divider
|
||||
text-align: center
|
||||
|
||||
.rewards-total-wrapper
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
.rewards-total-headline
|
||||
font-size: 16px
|
||||
text-align: left
|
||||
.rewards-total-inner
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
text-align: left
|
||||
.rewards-left
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
.name
|
||||
font-size: 16px
|
||||
.amount
|
||||
font-size: 24px
|
||||
.rewards-right
|
||||
img
|
||||
height: 49px
|
||||
width: 49px
|
||||
border-radius: 50%
|
||||
</style>
|
||||
|
||||
+74
-6
@@ -1,9 +1,31 @@
|
||||
import './assets/sass/main.sass'
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
|
||||
|
||||
import {
|
||||
createConfig,
|
||||
configureChains,
|
||||
getAccount,
|
||||
getContract,
|
||||
connect,
|
||||
disconnect,
|
||||
InjectedConnector,
|
||||
watchAccount,
|
||||
getWalletClient,
|
||||
fetchBalance,
|
||||
multicall,
|
||||
} from "@wagmi/core";
|
||||
import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
|
||||
import { MetaMaskConnector } from "@wagmi/core/connectors/metaMask";
|
||||
import { CoinbaseWalletConnector } from "@wagmi/core/connectors/coinbaseWallet";
|
||||
|
||||
import { goerli, mainnet } from "@wagmi/core/chains";
|
||||
import { publicProvider } from "@wagmi/core/providers/public";
|
||||
import { alchemyProvider } from "@wagmi/core/providers/alchemy";
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
@@ -14,14 +36,14 @@ import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
|
||||
/* import specific icons */
|
||||
import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket, faDroplet, faMoon, faPerson } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
/* add icons to the library */
|
||||
library.add(
|
||||
faArrowDown,
|
||||
faArrowRight,
|
||||
faArrowDown,
|
||||
faArrowRight,
|
||||
faDiscord,
|
||||
faTwitter,
|
||||
faTelegram,
|
||||
@@ -31,19 +53,65 @@ library.add(
|
||||
faCaretRight,
|
||||
faBars,
|
||||
faAnglesRight,
|
||||
faArrowRightToBracket,
|
||||
faArrowRightFromBracket,
|
||||
faArrowRightToBracket,
|
||||
faArrowRightFromBracket,
|
||||
faChevronDown,
|
||||
faChevronUp
|
||||
faChevronUp,
|
||||
faDroplet,
|
||||
faMoon,
|
||||
faPerson
|
||||
);
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
const pinia = createPinia();
|
||||
pinia.use(piniaPluginPersistedstate);
|
||||
|
||||
app.use(pinia);
|
||||
|
||||
|
||||
|
||||
const walletStore = useWalletStoreV2();
|
||||
|
||||
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
|
||||
console.log("hier chains");
|
||||
const { chains, publicClient, webSocketPublicClient } = configureChains(
|
||||
[goerli, mainnet],
|
||||
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
|
||||
);
|
||||
|
||||
walletStore.config = createConfig({
|
||||
autoConnect: true,
|
||||
connectors: [
|
||||
new CoinbaseWalletConnector({
|
||||
chains,
|
||||
options: {
|
||||
appName: "wagmi demo",
|
||||
},
|
||||
}),
|
||||
new MetaMaskConnector({ chains }),
|
||||
new WalletConnectConnector({
|
||||
chains,
|
||||
options: {
|
||||
projectId: projectId,
|
||||
showQrModal: true,
|
||||
metadata: {
|
||||
name: "Bloodline-App",
|
||||
description: "TODO Bloodline Description",
|
||||
url: "https://gitea.loseyourip.com/",
|
||||
icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
publicClient,
|
||||
webSocketPublicClient,
|
||||
});
|
||||
walletStore.publicClient = publicClient;
|
||||
|
||||
app.use(router)
|
||||
app.component('font-awesome-icon', FontAwesomeIcon)
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
+111
-14
@@ -5,11 +5,19 @@ 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 {ref} from "vue"
|
||||
|
||||
import {
|
||||
watchAccount,
|
||||
watchNetwork,
|
||||
watchContractEvent,
|
||||
watchWalletClient,
|
||||
getAccount,
|
||||
getNetwork,
|
||||
getPublicClient,
|
||||
getWalletClient,
|
||||
} from "@wagmi/core";
|
||||
|
||||
const router = createRouter({
|
||||
@@ -40,12 +48,18 @@ const router = createRouter({
|
||||
},
|
||||
{
|
||||
path: "/profile",
|
||||
name: "Profile",
|
||||
name: "profile",
|
||||
meta: {
|
||||
middleware: ["connected"],
|
||||
},
|
||||
component: () => import("../views/ProfileView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/cycle",
|
||||
name: "Cycle",
|
||||
name: "cycle",
|
||||
meta: {
|
||||
middleware: ["connected"],
|
||||
},
|
||||
component: () => import("../views/CycleView.vue"),
|
||||
},
|
||||
],
|
||||
@@ -53,27 +67,110 @@ const router = createRouter({
|
||||
|
||||
router.beforeEach(async (to, from) => {
|
||||
//init
|
||||
|
||||
const showPanel = ref(false);
|
||||
const eventWatch = ref(null);
|
||||
const netWorkEvent = ref(null);
|
||||
const memeSacrificedEvent = ref(null);
|
||||
const clientClientEvent = ref(null);
|
||||
console.log("beforeEach");
|
||||
const tokenStore = useTokenStore();
|
||||
const memeBurnerStore = useMemeburnerStore();
|
||||
const rewardLockerStore = useRewardLockerStore();
|
||||
const roundsStore = useRoundsStore();
|
||||
const walletStore = useWalletStoreV2();
|
||||
console.log("walletStore.publicClient", walletStore.publicClient);
|
||||
if (!walletStore.initialized) {
|
||||
walletStore.initialized = true
|
||||
console.log("hier");
|
||||
await walletStore.init();
|
||||
await tokenStore.initV2();
|
||||
await memeBurnerStore.init();
|
||||
await rewardLockerStore.init();
|
||||
await memeBurnerStore.init();
|
||||
console.log("init router");
|
||||
console.log("roundsStore.currentRound", roundsStore.currentRound);
|
||||
if (!roundsStore.currentRound) {
|
||||
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
|
||||
console.log("roundsStore.currentRound", roundsStore.currentRound);
|
||||
roundsStore.activeRound = roundsStore.currentRound;
|
||||
}
|
||||
|
||||
if (!walletStore.publicClient) {
|
||||
await walletStore.init();
|
||||
await tokenStore.initV2();
|
||||
await memeBurnerStore.init();
|
||||
await rewardLockerStore.init();
|
||||
await memeBurnerStore.init();
|
||||
//events
|
||||
eventWatch.value = watchAccount(async (account) => {
|
||||
console.log("account123", account);
|
||||
const publicClient = getPublicClient();
|
||||
console.log("publicClient", publicClient);
|
||||
|
||||
// {chainId: }
|
||||
console.log("walletClient", walletClient);
|
||||
if (account.address) {
|
||||
walletStore.address = account.address;
|
||||
walletStore.connected = true;
|
||||
let chainObject = walletStore.chain;
|
||||
if (!walletStore.chain) {
|
||||
const { chain, chains } = getNetwork();
|
||||
chainObject = chain;
|
||||
}
|
||||
var walletClient = await getWalletClient({
|
||||
account: account.address,
|
||||
chainId: chainObject.id,
|
||||
});
|
||||
walletStore.walletClient = walletClient;
|
||||
|
||||
// walletStore.getTokenBalances()
|
||||
|
||||
await memeBurnerStore.init();
|
||||
console.log("hierabc");
|
||||
await tokenStore.initV2();
|
||||
} else {
|
||||
walletStore.address = null;
|
||||
walletStore.connected = false;
|
||||
walletStore.walletClient = null;
|
||||
}
|
||||
});
|
||||
|
||||
netWorkEvent.value = watchNetwork((network) => {
|
||||
console.log("network123", network);
|
||||
if (network.chain) {
|
||||
walletStore.chain = network.chain;
|
||||
|
||||
clientClientEvent.value = watchWalletClient(
|
||||
{
|
||||
chainId: network.chain.id,
|
||||
},
|
||||
(walletClient) => {
|
||||
walletStore.walletClient = walletClient;
|
||||
console.log("wc123", walletClient);
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
memeSacrificedEvent.value = watchContractEvent(
|
||||
{
|
||||
address: memeBurnerStore.config.contractAddress,
|
||||
abi: memeBurnerStore.config.abi,
|
||||
eventName: "MemeSacrificed",
|
||||
},
|
||||
async (log) => {
|
||||
console.log("memeSacrificedEvent", log);
|
||||
const token = log[0].args.sacrificedToken;
|
||||
await roundsStore.updateCurrentRound(token);
|
||||
}
|
||||
);
|
||||
|
||||
await roundsStore.fillRound(roundsStore.activeRound);
|
||||
await walletStore.loadWalletData();
|
||||
}
|
||||
|
||||
|
||||
if (!roundsStore.currentRound) {
|
||||
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
|
||||
console.log("roundsStore.currentRound", roundsStore.currentRound);
|
||||
roundsStore.activeRound = roundsStore.currentRound;
|
||||
//middleware
|
||||
if (to.meta.middleware) {
|
||||
if (!walletStore.connected) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// initContracts
|
||||
return true;
|
||||
});
|
||||
|
||||
|
||||
+10
-1
@@ -14,6 +14,15 @@ export const useRoundsStore = defineStore("rounds", {
|
||||
currentRound: null
|
||||
}),
|
||||
getters: {
|
||||
getRoundWinner() {
|
||||
const goal = this.getCurrentRoundData?.goal;
|
||||
const winnerCoin = this.rounds[this.activeRound]?.token.find((token) => token.amount === goal)
|
||||
if (winnerCoin) {
|
||||
return winnerCoin;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getCurrentRoundData() {
|
||||
return this.rounds[this.activeRound];
|
||||
}
|
||||
@@ -31,7 +40,7 @@ export const useRoundsStore = defineStore("rounds", {
|
||||
for (let index = 0; index < this.currentRound; index++) {
|
||||
console.log("load round: " + index);
|
||||
// await this.fillRound(index)
|
||||
|
||||
console.log({index, address: walletStore.address});
|
||||
contracts.push({
|
||||
...rewardLockerStore.contract,
|
||||
functionName: "getTotalRewardsOf",
|
||||
|
||||
+11
-40
@@ -39,7 +39,8 @@ export const useWalletStoreV2 = defineStore("walletV2", {
|
||||
walletClient: null,
|
||||
config: null,
|
||||
chain: null,
|
||||
token: [],
|
||||
token: [],
|
||||
initialized: false
|
||||
}),
|
||||
getters: {
|
||||
sacrificeToken: (state) => state.token.filter((obj) => obj.contractAddress !== MemeToken.contractAddress),
|
||||
@@ -48,42 +49,7 @@ export const useWalletStoreV2 = defineStore("walletV2", {
|
||||
actions: {
|
||||
async init() {
|
||||
console.log("wallet init");
|
||||
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
|
||||
|
||||
const { chains, publicClient, webSocketPublicClient } = configureChains(
|
||||
[goerli, mainnet],
|
||||
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
|
||||
);
|
||||
|
||||
this.config = createConfig({
|
||||
autoConnect: true,
|
||||
connectors: [
|
||||
new CoinbaseWalletConnector({
|
||||
chains,
|
||||
options: {
|
||||
appName: "wagmi demo",
|
||||
},
|
||||
}),
|
||||
new MetaMaskConnector({ chains }),
|
||||
new WalletConnectConnector({
|
||||
chains,
|
||||
options: {
|
||||
projectId: projectId,
|
||||
showQrModal: true,
|
||||
metadata: {
|
||||
name: "Bloodline-App",
|
||||
description: "TODO Bloodline Description",
|
||||
url: "https://gitea.loseyourip.com/",
|
||||
icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
publicClient,
|
||||
webSocketPublicClient,
|
||||
});
|
||||
this.publicClient = publicClient;
|
||||
|
||||
console.log("hier123");
|
||||
const account = getAccount();
|
||||
@@ -148,7 +114,9 @@ export const useWalletStoreV2 = defineStore("walletV2", {
|
||||
});
|
||||
console.log("data", data);
|
||||
for (let index = 0; index < tokenStore.token.length; index++) {
|
||||
const token = tokenStore.token[index];
|
||||
const token = tokenStore.token[index];
|
||||
console.log("token", token);
|
||||
console.log("data[index].result", data[index].result);
|
||||
const balanceOfDecimal = data[index].result / BigInt(Math.pow(10, token.decimals));
|
||||
this.token.push({
|
||||
contractAddress: token.contractAddress,
|
||||
@@ -157,15 +125,18 @@ export const useWalletStoreV2 = defineStore("walletV2", {
|
||||
}
|
||||
},
|
||||
async loadWalletData() {
|
||||
if (!this.connected) {
|
||||
return
|
||||
}
|
||||
console.log("loadWalletData");
|
||||
const rewardlockerStore = useRewardLockerStore();
|
||||
|
||||
await this.getTokenBalances();
|
||||
|
||||
await this.getTokenBalances();
|
||||
//MemeToken Staked
|
||||
const tokenStore = useTokenStore();
|
||||
|
||||
const staked = await rewardlockerStore.getStaked(this.address);
|
||||
|
||||
console.log("staked", staked);
|
||||
this.memeToken.staked = Number(staked / BigInt(Math.pow(10, tokenStore.memeToken.decimals)));
|
||||
|
||||
}
|
||||
|
||||
+236
-11
@@ -1,21 +1,246 @@
|
||||
<template>
|
||||
<div class="cycle-page">
|
||||
<div class="bloodline-page-headline">Cycle</div>
|
||||
<div class="bloodline-page-description container">
|
||||
Claim and trade your $BDL at each cycle's end. Become the most powerful meme clan each cycle and win extra
|
||||
rewards.
|
||||
<div class="cycle-header container">
|
||||
<div class="bloodline-page-headline">Cycle</div>
|
||||
<div class="bloodline-page-description">
|
||||
Claim and trade your $BDL at each cycle's end. Become the most powerful meme clan each cycle and win
|
||||
extra rewards.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-wrapper">
|
||||
<font-awesome-icon
|
||||
:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
|
||||
@click="prevSlide"
|
||||
:icon="['fas', 'caret-left']"
|
||||
/>
|
||||
<div class="slider-text">Cycle {{ roundsStore.activeRound }}</div>
|
||||
<font-awesome-icon
|
||||
:class="{ 'slider-next': true, disabled: roundsStore.currentRound === roundsStore.activeRound }"
|
||||
@click="nextSlide"
|
||||
:icon="['fas', 'caret-right']"
|
||||
/>
|
||||
</div>
|
||||
<div class="cycle card bloodline-wrapper container">
|
||||
<div class="bloodline-border">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Sacrifice:</td>
|
||||
<td class="divider"></td>
|
||||
<!-- <td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td> -->
|
||||
<td>{{ roundsStore.getCurrentRoundData?.goalInBLD }} $BDL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Time left:</td>
|
||||
<td class="divider"></td>
|
||||
<td v-if="roundsStore.currentRound === roundsStore.activeRound">
|
||||
{{ days }} {{ hours }} {{ minutes }}
|
||||
</td>
|
||||
<td v-else>0</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="bloodline-border bloodline-border__thin grey cycle-winner" v-if="roundsStore.getRoundWinner">
|
||||
<div class="cycle-winner-left">
|
||||
<div class="cycle-winner-headline">Clan Winner</div>
|
||||
<div class="cycle-winner-subheadline">+20% Clan Bonus</div>
|
||||
</div>
|
||||
<div class="cycle-winner-right">
|
||||
<div class="cycle-winner-logo">
|
||||
<img :src="roundsStore.getRoundWinner.vamplogo" alt="" />
|
||||
</div>
|
||||
<div class="cycle-winner-name">{{ roundsStore.getRoundWinner.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bloodline-border bloodline-border__thin grey cycle-winner" v-else>
|
||||
<div class="cycle-winner-left">
|
||||
<div class="cycle-winner-headline">No Clan Winner</div>
|
||||
<div class="cycle-winner-subheadline">TODO time limit reached or activeround</div>
|
||||
</div>
|
||||
<div class="cycle-winner-right">
|
||||
<div class="cycle-winner-logo inactive">
|
||||
<img src="/assets/img/token/bloodline.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<token-claim></token-claim>
|
||||
|
||||
<div class="bloodline-clan">
|
||||
<h3>Bloodline Clan</h3>
|
||||
<p>
|
||||
Win extra rewards for you and your clan. Increase the strength of your bloodline by sacrificing more
|
||||
memes.
|
||||
</p>
|
||||
<table class="bonus-table" v-if="!isMobile">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1st</th>
|
||||
<td>100% Bonus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2nd</th>
|
||||
<td>50% Bonus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3rd</th>
|
||||
<td>No Bonus</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { inject, ref, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
import BloodChart from "@/components/BloodChart.vue";
|
||||
import TokenClaim from "@/components/TokenClaim.vue";
|
||||
import { useRoundsStore } from "@/stores/rounds";
|
||||
const roundsStore = useRoundsStore();
|
||||
|
||||
const days = ref(null);
|
||||
const hours = ref(null);
|
||||
const minutes = ref(null);
|
||||
const seconds = ref(null);
|
||||
const timer = ref(null);
|
||||
|
||||
const isMobile = inject("isMobile");
|
||||
|
||||
onMounted(() => {
|
||||
console.log("onmounted", roundsStore.activeRound);
|
||||
console.log("blatest", roundsStore.getCurrentRoundData.expirationTimestamp);
|
||||
const expirationTimestamp = roundsStore.getCurrentRoundData.expirationTimestamp;
|
||||
timer.value = setInterval(function () {
|
||||
timeBetweenDates(expirationTimestamp);
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer.value);
|
||||
});
|
||||
|
||||
async function prevSlide() {
|
||||
console.log("blub1", roundsStore.activeRound);
|
||||
if (roundsStore.activeRound > 1) {
|
||||
roundsStore.activeRound--;
|
||||
await roundsStore.fillRound(roundsStore.activeRound);
|
||||
}
|
||||
}
|
||||
|
||||
async function nextSlide() {
|
||||
if (roundsStore.activeRound < roundsStore.currentRound) {
|
||||
roundsStore.activeRound++;
|
||||
await roundsStore.fillRound(roundsStore.activeRound);
|
||||
}
|
||||
}
|
||||
|
||||
function timeBetweenDates(expirationTimestamp) {
|
||||
const dateEntered = new Date(Number(expirationTimestamp) * 1000);
|
||||
if (dateEntered) {
|
||||
var now = new Date();
|
||||
var difference = dateEntered.getTime() - now.getTime();
|
||||
console.log("difference", difference);
|
||||
if (difference <= 0) {
|
||||
clearInterval(timer.value);
|
||||
} else {
|
||||
var _seconds = Math.floor(difference / 1000);
|
||||
var _minutes = Math.floor(_seconds / 60);
|
||||
var _hours = Math.floor(_minutes / 60);
|
||||
var _days = Math.floor(_hours / 24);
|
||||
|
||||
console.log("_days", _days);
|
||||
|
||||
days.value = _days;
|
||||
hours.value = _hours % 24;
|
||||
minutes.value = _minutes % 60;
|
||||
seconds.value = _seconds % 60;
|
||||
|
||||
days.value = ("0" + days.value).slice(-2) + "d";
|
||||
hours.value = ("0" + hours.value).slice(-2) + "h";
|
||||
minutes.value = ("0" + minutes.value).slice(-2) + "m";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.bloodline-page-headline
|
||||
|
||||
.cycle-header
|
||||
.bloodline-page-headline
|
||||
text-align: center
|
||||
font-size: 32px
|
||||
margin-bottom: 32px
|
||||
.bloodline-page-description
|
||||
text-align: center
|
||||
font-size: 16px
|
||||
|
||||
.slider-wrapper
|
||||
display: flex
|
||||
justify-content: center
|
||||
font-size: 24px
|
||||
user-select: none
|
||||
position: sticky
|
||||
top: 82px
|
||||
z-index: 3
|
||||
background: #2D2D2D
|
||||
padding: 16px 0
|
||||
@media (min-width: 992px)
|
||||
position: unset
|
||||
.slider-text
|
||||
margin: 0 24px
|
||||
margin-top: auto
|
||||
margin-bottom: auto
|
||||
.slider-prev, .slider-next
|
||||
color: var(--purple)
|
||||
font-size: 40px
|
||||
cursor: pointer
|
||||
&:hover,&:active, &:focus
|
||||
filter: brightness(0.80)
|
||||
&.disabled
|
||||
opacity: .35
|
||||
pointer-events: none
|
||||
|
||||
|
||||
|
||||
.bloodline-wrapper
|
||||
padding-top: 24px
|
||||
border-bottom-left-radius: unset
|
||||
border-bottom-right-radius: unset
|
||||
gap: 24px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
text-align: center
|
||||
font-size: 32px
|
||||
margin-bottom: 32px
|
||||
.bloodline-page-description
|
||||
text-align: center
|
||||
font-size: 16px
|
||||
|
||||
.cycle-winner
|
||||
padding: 8px 24px
|
||||
display: flex
|
||||
text-align: left
|
||||
justify-content: space-between
|
||||
.cycle-winner-left
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
.cycle-winner-headline
|
||||
font-size: 24px
|
||||
.cycle-winner-subheadline
|
||||
font-size: 12px
|
||||
.cycle-winner-right
|
||||
.cycle-winner-logo
|
||||
img
|
||||
height: 49px
|
||||
width: 49px
|
||||
border-radius: 50%
|
||||
&.inactive
|
||||
img
|
||||
opacity: 0.3
|
||||
.cycle-winner-name
|
||||
font-size: 16px
|
||||
</style>
|
||||
|
||||
+23
-187
@@ -2,8 +2,7 @@
|
||||
import { ref, computed, inject, onMounted, onBeforeUnmount } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import SacrificeToken from "@/components/SacrificeToken.vue";
|
||||
import BloodChart from "@/components/BloodChart.vue";
|
||||
import TokenClaim from "@/components/TokenClaim.vue";
|
||||
|
||||
// import { useWalletStore } from "@/stores/wallet";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { useRoundsStore } from "@/stores/rounds";
|
||||
@@ -13,65 +12,9 @@ const { getCurrentRoundData } = storeToRefs(roundsStore);
|
||||
|
||||
const { currentRound, activeRound, rounds } = storeToRefs(roundsStore);
|
||||
|
||||
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");
|
||||
|
||||
async function prevSlide() {
|
||||
if (activeRound.value > 1) {
|
||||
activeRound.value--;
|
||||
await roundsStore.fillRound(activeRound.value);
|
||||
}
|
||||
}
|
||||
|
||||
async function nextSlide() {
|
||||
if (activeRound.value < currentRound.value) {
|
||||
activeRound.value++;
|
||||
await roundsStore.fillRound(activeRound.value);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log("getCurrentRoundData", getCurrentRoundData);
|
||||
timer.value = setInterval(function () {
|
||||
timeBetweenDates();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer.value);
|
||||
});
|
||||
|
||||
function timeBetweenDates() {
|
||||
const dateEntered = new Date(Number(getCurrentRoundData.value?.expirationTimestamp) * 1000);
|
||||
|
||||
if (dateEntered) {
|
||||
var now = new Date();
|
||||
var difference = dateEntered.getTime() - now.getTime();
|
||||
if (difference <= 0) {
|
||||
clearInterval(timer.value);
|
||||
} else {
|
||||
var _seconds = Math.floor(difference / 1000);
|
||||
var _minutes = Math.floor(_seconds / 60);
|
||||
var _hours = Math.floor(_minutes / 60);
|
||||
var _days = Math.floor(_hours / 24);
|
||||
|
||||
days.value = _days;
|
||||
hours.value = _hours % 24;
|
||||
minutes.value = _minutes % 60;
|
||||
seconds.value = _seconds % 60;
|
||||
|
||||
days.value = ("0" + days.value).slice(-2) + "d";
|
||||
hours.value = ("0" + hours.value).slice(-2) + "h";
|
||||
minutes.value = ("0" + minutes.value).slice(-2) + "m";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -83,92 +26,12 @@ function timeBetweenDates() {
|
||||
Join the bloodline scheme.
|
||||
</div>
|
||||
</section>
|
||||
<section id="sacrifice" class="container">
|
||||
<section id="sacrifice">
|
||||
<sacrifice-token :data="tokenStore.sacrificeToken"></sacrifice-token>
|
||||
</section>
|
||||
|
||||
<div class="container section-header-container">
|
||||
<h3>Cycle</h3>
|
||||
Become the most powerful clan each cycle and claim extra rewards.Claim and trade your $BLOOD at each
|
||||
cycle's end.
|
||||
</div>
|
||||
<section id="cycle-section" class="container">
|
||||
<div class="slider-wrapper">
|
||||
<font-awesome-icon
|
||||
:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
|
||||
@click="prevSlide"
|
||||
:icon="['fas', 'caret-left']"
|
||||
/>
|
||||
<div class="slider-text">Cycle {{ roundsStore.activeRound }}</div>
|
||||
<font-awesome-icon
|
||||
:class="{ 'slider-next': true, disabled: currentRound === roundsStore.activeRound }"
|
||||
@click="nextSlide"
|
||||
:icon="['fas', 'caret-right']"
|
||||
/>
|
||||
</div>
|
||||
<div class="cycle card bloodline-wrapper">
|
||||
<div class="bloodline-inner">
|
||||
<token-claim></token-claim>
|
||||
</div>
|
||||
|
||||
<div class="bloodline-clan">
|
||||
<h3>Bloodline Clan</h3>
|
||||
<p>
|
||||
Win extra rewards for you and your clan. Increase the strength of your bloodline by
|
||||
sacrificing more memes.
|
||||
</p>
|
||||
<table class="bonus-table" v-if="!isMobile">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1st</th>
|
||||
<td>100% Bonus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2nd</th>
|
||||
<td>50% Bonus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3rd</th>
|
||||
<td>No Bonus</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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="rounds[activeRound]"></blood-chart>
|
||||
</div>
|
||||
<div class="cycle-end-wrapper">
|
||||
<div class="cycle-end-inner">
|
||||
<h2>Cycle End</h2>
|
||||
<div class="cycle-end-text">A cycle ends when only one of these goals is reached.</div>
|
||||
<div class="bloodline-border">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Sacrifice:</td>
|
||||
<td class="divider"></td>
|
||||
<!-- <td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td> -->
|
||||
<td>{{ getCurrentRoundData?.goalInBLD }} $BDL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Time left:</td>
|
||||
<td class="divider"></td>
|
||||
<td v-if="currentRound === roundsStore.activeRound">
|
||||
{{ days }} {{ hours }} {{ minutes }}
|
||||
</td>
|
||||
<td v-else>0</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="container section-header-container">
|
||||
<section id="cycle-section"></section>
|
||||
<div class="section-header-container">
|
||||
<div class="tutorial-header">
|
||||
<div class="tutorial-headline">Tutorial</div>
|
||||
<div class="tutorial-more" @click="openTutorial = !openTutorial">
|
||||
@@ -176,10 +39,12 @@ function timeBetweenDates() {
|
||||
<font-awesome-icon v-else icon="chevron-down" />
|
||||
</div>
|
||||
</div>
|
||||
<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 v-if="openTutorial" class="tutorial-wrapper">
|
||||
<div class="tutorial-text container">
|
||||
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">
|
||||
<div class="card">
|
||||
<h2>Tokenomics</h2>
|
||||
<p>100% clan owned. No team %, no pre-mine</p>
|
||||
@@ -187,7 +52,7 @@ function timeBetweenDates() {
|
||||
<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<div class="tutorial-footer">
|
||||
$BLOOD is 100%<br />
|
||||
community owned.<br />
|
||||
No team %, no pre-mine.
|
||||
@@ -243,7 +108,6 @@ function timeBetweenDates() {
|
||||
padding-right: 16px
|
||||
#tokenomics
|
||||
background-color: var(--darkgrey)
|
||||
padding-bottom: 32px
|
||||
>div
|
||||
text-align: center
|
||||
img
|
||||
@@ -270,38 +134,10 @@ function timeBetweenDates() {
|
||||
text-align: center
|
||||
padding-top: 10px
|
||||
|
||||
.slider-wrapper
|
||||
display: flex
|
||||
justify-content: center
|
||||
font-size: 24px
|
||||
user-select: none
|
||||
position: sticky
|
||||
top: 82px
|
||||
z-index: 3
|
||||
background: #2D2D2D
|
||||
padding: 16px 0
|
||||
@media (min-width: 992px)
|
||||
position: unset
|
||||
.slider-text
|
||||
margin: 0 24px
|
||||
margin-top: auto
|
||||
margin-bottom: auto
|
||||
.slider-prev, .slider-next
|
||||
color: var(--purple)
|
||||
font-size: 40px
|
||||
cursor: pointer
|
||||
&:hover,&:active, &:focus
|
||||
filter: brightness(0.80)
|
||||
&.disabled
|
||||
opacity: .35
|
||||
pointer-events: none
|
||||
|
||||
|
||||
.section-header-container
|
||||
text-align: center
|
||||
font-size: 16px
|
||||
padding: 0 24px
|
||||
margin-top: 64px
|
||||
margin-bottom: 64px
|
||||
margin: 24px 0
|
||||
@media (min-width: 992px)
|
||||
width: 655px
|
||||
.tutorial-header
|
||||
@@ -309,18 +145,18 @@ function timeBetweenDates() {
|
||||
justify-content: center
|
||||
gap: 16px
|
||||
font-size: 24px
|
||||
margin-bottom: 40px
|
||||
.tutorial-text
|
||||
font-size: 18px
|
||||
margin-bottom: 24px
|
||||
.tutorial-wrapper
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 24px
|
||||
.tutorial-text
|
||||
font-size: 18px
|
||||
text-align: center
|
||||
.tutorial-footer
|
||||
text-align: center
|
||||
|
||||
|
||||
.bloodline-wrapper
|
||||
.bloodline-inner
|
||||
padding: 4px
|
||||
@media (min-width: 992px)
|
||||
padding: 20px
|
||||
.bloodline-clan
|
||||
text-align: center
|
||||
|
||||
.cycle-end-wrapper
|
||||
.cycle-end-inner
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<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-logo"><img :src="getblocky(walletStore.address)" alt="" /></div>
|
||||
<div class="profile-subheader-address">0x12345...812d</div>
|
||||
</div>
|
||||
<div class="total-rewards-wrapper">
|
||||
@@ -27,7 +27,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="most-sacrificed-wrapper">
|
||||
<stake-component></stake-component>
|
||||
|
||||
<div class="most-sacrificed-wrapper" v-if="false">
|
||||
<div class="most-sacrificed-inner">
|
||||
<div class="most-sacrificed-left">
|
||||
<div class="most-sacrificed-header">Bloodline Clan</div>
|
||||
@@ -41,7 +43,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-sacrificed-wrapper">
|
||||
<div class="total-sacrificed-wrapper" v-if="false">
|
||||
<div class="total-sacrificed-inner">
|
||||
<div class="total-sacrificed-header">Total Sacrifice</div>
|
||||
<div class="total-sacrificed-coins">
|
||||
@@ -85,7 +87,10 @@
|
||||
<div class="cycle-round-badget" v-if="roundsStore.currentRound === round.round">
|
||||
active
|
||||
</div>
|
||||
<div class="cycle-round-reward">
|
||||
<div class="cycle-round-reward" v-if="roundsStore.currentRound === round.round">
|
||||
todo
|
||||
</div>
|
||||
<div class="cycle-round-reward" v-else>
|
||||
{{ Number(round.rewards_total / BigInt(Math.pow(10, 18))) }} $BDL
|
||||
</div>
|
||||
<div class="cycle-round-more" @click="openRound(index)">
|
||||
@@ -163,9 +168,15 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { useRoundsStore } from "@/stores/rounds";
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
|
||||
import { getblocky } from "@/helper/helper.js";
|
||||
import StakeComponent from "@/components/StakeComponent.vue";
|
||||
|
||||
const roundsStore = useRoundsStore();
|
||||
|
||||
const walletStore = useWalletStoreV2();
|
||||
|
||||
const activeRound = ref(null);
|
||||
const openCycleElement = ref(false);
|
||||
function openRound(index) {
|
||||
@@ -183,7 +194,17 @@ onMounted(async () => {
|
||||
console.log("roundsStore.rounds", roundsStore.rounds);
|
||||
});
|
||||
|
||||
const rounds = computed(() => roundsStore.rounds.reverse());
|
||||
const rounds = computed(() =>
|
||||
roundsStore.rounds
|
||||
.filter((round) => {
|
||||
if (round.round) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.reverse()
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
@@ -197,8 +218,12 @@ const rounds = computed(() => roundsStore.rounds.reverse());
|
||||
justify-content: center
|
||||
gap: 12px
|
||||
align-items: center
|
||||
// .profile-subheader-logo
|
||||
margin-bottom: 24px
|
||||
.profile-subheader-logo
|
||||
img
|
||||
width: 21px
|
||||
height: 21px
|
||||
border-radius: 20%
|
||||
.profile-subheader-address
|
||||
font-size: 12px
|
||||
.total-rewards-wrapper
|
||||
|
||||
@@ -5,9 +5,10 @@
|
||||
<button @click="sacrificeMeme">sacrifice Meme</button>
|
||||
<button @click="approveMeme1">approve Meme1</button>
|
||||
<button @click="tokenStore.approveToken(MemeBurnerJson, 10)">wallet approve</button>
|
||||
<button @click="stake">stake</button>
|
||||
<button @click="stake">z</button>
|
||||
<button @click="">unstake</button>
|
||||
<button @click="fetchBalance">fetchBalance</button>
|
||||
<button @click="claimView">claimview</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -54,6 +55,10 @@ onMounted(async () => {
|
||||
// );
|
||||
});
|
||||
|
||||
async function claimView() {
|
||||
var resultStake = await rewardLockerStore.contract.read.claim([[0, 1, 2]]);
|
||||
console.log("resultStake", resultStake);
|
||||
}
|
||||
// change this value to make yourself rich quick
|
||||
async function mintToken() {
|
||||
try {
|
||||
|
||||
Reference in New Issue
Block a user