ImmortalClanVue/src/App.vue

<script setup>
import { onMounted, onUnmounted, provide, ref } from "vue";
import { storeToRefs } from "pinia";

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 { useMultiCallStore } from "@/stores/multicall";
import { useRoundsStore } from "@/stores/rounds";

import SlideoutPanel from "./components/SlideoutPanel.vue";
import ConnectWallet from "./components/ConnectWallet.vue";

import {
	watchAccount,
	watchNetwork,
	watchContractEvent,
	getAccount,
	getNetwork,
	getPublicClient,
	getWalletClient,
} from "@wagmi/core";

const tokenStore = useTokenStore();
const contractStore = useContractStore();
const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore();
const multiCallStore = useMultiCallStore();
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);

isMobile.value = isMobileFunc();
onUnmounted(() => {
	window.removeEventListener("resize", handleWindowSizeChange);

	eventWatch.value();
	netWorkEvent.value();
	console.log("unsubscribe");
});
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;
	}
}
provide("isMobile", isMobile);

onMounted(async () => {
	window.addEventListener("resize", handleWindowSizeChange);
	handleWindowSizeChange();

	// initContracts
	await walletStore.init();
	await tokenStore.initV2();
	await memeBurnerStore.init();
	await rewardLockerStore.init();
	await memeBurnerStore.init();
	// await multiCallStore.init();
	//Memeburner Contract

	const account = getAccount();

	console.log("account", account);
	if (account.address) {
		walletStore.address = account.address;
		walletStore.connected = true;
	}

	//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) => {
		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({
				chainId: chainObject.id,
			});
			walletStore.walletClient = walletClient;
			await memeBurnerStore.init();
		} 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;
		}
	});

	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);
		}
	);
});
</script>

<template>
	<navbar @show-panel="((value) => showPanel = value)"/>
    <slideout-panel v-model="showPanel">
    <connect-wallet></connect-wallet>
    </slideout-panel>
	<div class="main">
		<RouterView />
	</div>
	<div class="footer">
		<div class="footer-inner">
			$BLOOD is 100%<br />
			community owned.<br />
			No team %, no pre-mine.
		</div>
	</div>
</template>

<style lang="sass">
.footer
    height: 450px
    min-height: 450px
    background-color: var(--grey2)
    .footer-inner
        padding: 24px
        font-size: 24px
        text-align: center
</style>