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

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

import {
	watchAccount,
	watchNetwork,
	watchContractEvent,
	watchWalletClient,
	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);

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

	eventWatch.value();
	netWorkEvent.value();
	memeSacrificedEvent.value();
	clientClientEvent.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);
provide("showPanel", showPanel);

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

	await walletStore.init();

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

	//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>

<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">
			Follow Bloodline
			<!-- $BLOOD is 100%<br />
			community owned.<br />
			No team %, no pre-mine. -->
			<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 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>
</template>

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