309 lines
8.2 KiB
Vue
309 lines
8.2 KiB
Vue
<script setup>
|
|
import { onMounted, onUnmounted, provide, ref, watch } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
import Navbar from "./components/Navbar.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 { useRoundsStore } from "@/stores/rounds";
|
|
|
|
import SlideoutPanel from "./components/SlideoutPanel.vue";
|
|
import ConnectWallet from "./components/ConnectWallet.vue";
|
|
import CardComponent from "@/components/CardComponent.vue";
|
|
|
|
import {
|
|
watchAccount,
|
|
watchNetwork,
|
|
watchContractEvent,
|
|
watchWalletClient,
|
|
watchPublicClient,
|
|
getAccount,
|
|
getNetwork,
|
|
getPublicClient,
|
|
getWalletClient,
|
|
} from "@wagmi/core";
|
|
|
|
const tokenStore = useTokenStore();
|
|
const contractStore = useContractStore();
|
|
const memeBurnerStore = useMemeburnerStore();
|
|
const rewardLockerStore = useRewardLockerStore();
|
|
const roundsStore = useRoundsStore();
|
|
const walletStore = useWalletStoreV2();
|
|
const { memeBurner, token } = storeToRefs(tokenStore);
|
|
const { list } = storeToRefs(contractStore);
|
|
const isMobile = ref(false);
|
|
const showPanel = ref(false);
|
|
const eventWatch = ref(null);
|
|
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);
|
|
|
|
eventWatch.value();
|
|
netWorkEvent.value();
|
|
memeSacrificedEvent.value();
|
|
clientClientEvent.value();
|
|
console.log("unsubscribe");
|
|
});
|
|
|
|
watch(showPanel, (newValue, oldValue) => {
|
|
console.log("document.body", document.body);
|
|
console.log("newValue", newValue);
|
|
if (newValue) {
|
|
document.body.classList.add("sideoutpanel-open");
|
|
} else {
|
|
document.body.classList.remove("sideoutpanel-open");
|
|
}
|
|
});
|
|
|
|
const handleWindowSizeChange = () => {
|
|
isMobile.value = isMobileFunc();
|
|
// your code
|
|
};
|
|
|
|
function showPanelTest(bla) {
|
|
console.log("bla", bla);
|
|
}
|
|
|
|
function isMobileFunc() {
|
|
if (screen.width <= 760) {
|
|
return true;
|
|
} else {
|
|
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();
|
|
|
|
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.initialized", 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;
|
|
}
|
|
|
|
const { chain, chains } = getNetwork();
|
|
console.log("chain", chain?.id);
|
|
console.log("chains", chains);
|
|
|
|
await roundsStore.fillRound(roundsStore.activeRound);
|
|
// await walletStore.loadWalletData();
|
|
|
|
// initContracts
|
|
//Memeburner Contract
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<navbar @show-panel="(value) => (showPanel = value)" />
|
|
<slideout-panel v-model="showPanel">
|
|
<connect-wallet></connect-wallet>
|
|
</slideout-panel>
|
|
<div class="main" :class="{ 'no-scroll': showPanel, mobile: isMobile }">
|
|
<RouterView />
|
|
</div>
|
|
<div class="footer">
|
|
<div class="footer-inner">
|
|
<div class="footer-headline">Join Bloodline</div>
|
|
<div class="footer-social-links">
|
|
<div class="social-bloodline-badge">
|
|
<div class="social-bloodline-badge-icon">
|
|
<font-awesome-icon icon="fa-brands fa-discord" />
|
|
</div>
|
|
</div>
|
|
<div class="social-bloodline-badge">
|
|
<div class="social-bloodline-badge-icon">
|
|
<font-awesome-icon icon="fa-brands fa-telegram" />
|
|
</div>
|
|
</div>
|
|
<div class="social-bloodline-badge">
|
|
<div class="social-bloodline-badge-icon">
|
|
<font-awesome-icon icon="fa-brands fa-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: auto
|
|
background-color: var(--midnight-black)
|
|
@media (min-width: 992px)
|
|
height: 150px
|
|
min-height: 150px
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
.footer-inner
|
|
padding: 16px 0 24px 0
|
|
font-size: 24px
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 8px
|
|
align-items: center
|
|
@media (min-width: 992px)
|
|
justify-content: 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
|
|
&:hover,&:active,&:focus
|
|
background-color: lighten( #858585, 10%)
|
|
cursor: pointer
|
|
.social-bloodline-badge-icon
|
|
font-size: 16px
|
|
.main
|
|
// padding-top: 24px
|
|
margin-top: 82px
|
|
padding: 24px 0
|
|
@media (min-width: 992px)
|
|
margin-top: 96px
|
|
padding: 80px 0
|
|
&.mobile
|
|
&.no-scroll
|
|
overflow: hidden
|
|
|
|
|
|
.mobile-navigation-bar
|
|
height: 72px
|
|
z-index: 1
|
|
width: 100%
|
|
padding: 16px 48px
|
|
border-radius: 16px 16px 0px 0px
|
|
box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.25)
|
|
background: var(--midnight-black, #0F0F0F)
|
|
bottom: -1px
|
|
position: fixed
|
|
display: flex
|
|
justify-content: space-around
|
|
align-items: center
|
|
div
|
|
font-size: 40px
|
|
cursor: pointer
|
|
&.active
|
|
color: var(--purple)
|
|
|
|
.modal-overlay
|
|
background-color: rgb(15, 15, 15, 0.7)
|
|
height: 100vh
|
|
width: 100vw
|
|
position: fixed
|
|
left: 0
|
|
bottom: 0
|
|
z-index: 10
|
|
@media (min-width: 992px)
|
|
background-color: unset
|
|
.modal-card
|
|
border-radius: 16px
|
|
padding: 16px
|
|
width: 342px
|
|
text-align: center
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
transform: translate(-50%, -50%)
|
|
border: 2px solid var(--dark-purple, #4B0082)
|
|
background: var(--midnight-black, #0F0F0F)
|
|
z-index: 100
|
|
gap: 16px
|
|
@media (min-width: 992px)
|
|
top: 142px
|
|
right: 24px
|
|
left: unset
|
|
transform: unset
|
|
.body
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 8px
|
|
.amount-number
|
|
display: flex
|
|
justify-content: center
|
|
align-items: end
|
|
gap: 8px
|
|
img
|
|
width: 74px
|
|
height: 74px
|
|
|
|
body::-webkit-scrollbar
|
|
width: 10px
|
|
|
|
body::-webkit-scrollbar-track
|
|
background: #202020
|
|
|
|
body::-webkit-scrollbar-thumb
|
|
background: #202020
|
|
|
|
body:hover::-webkit-scrollbar-thumb
|
|
background: grey
|
|
|
|
|
|
.toast-header, .toast-body
|
|
font-size: 16px
|
|
</style>
|