viem wagmi

src/App.vue

@@ -3,14 +3,20 @@ import { onMounted, onUnmounted, provide, ref } from "vue";
 import { storeToRefs } from "pinia";
 
 import Navbar from "./components/Navbar.vue";
-import { useWalletStore } from "@/stores/wallet";
-const walletStore = useWalletStore();
+import { useWalletStoreV2 } from "@/stores/walletV2";
+const walletStore = useWalletStoreV2();
 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, getPublicClient, getWalletClient } from "@wagmi/core";
+
 const tokenStore = useTokenStore();
 const contractStore = useContractStore();
 const memeBurnerStore = useMemeburnerStore();
@@ -20,15 +26,25 @@ const roundsStore = useRoundsStore();
 const { memeBurner, token } = storeToRefs(tokenStore);
 const { list } = storeToRefs(contractStore);
 const isMobile = ref(false);
+const showPanel = ref(false);
+const eventWatch = ref(null);
+
 isMobile.value = isMobileFunc();
 onUnmounted(() => {
 	window.removeEventListener("resize", handleWindowSizeChange);
+
+	eventWatch.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;
@@ -41,25 +57,47 @@ provide("isMobile", isMobile);
 onMounted(async () => {
 	window.addEventListener("resize", handleWindowSizeChange);
 	handleWindowSizeChange();
+
 	// initContracts
 	await walletStore.init();
-	await tokenStore.init();
-	await memeBurnerStore.init();
-	await rewardLockerStore.init();
-	await memeBurnerStore.init();
-	await multiCallStore.init();
+	// await tokenStore.init();
+	// await memeBurnerStore.init();
+	// await rewardLockerStore.init();
+	// await memeBurnerStore.init();
+	// await multiCallStore.init();
 	//Memeburner Contract
 
 	//init
-	roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
-	console.log("roundsStore.currentRound", roundsStore.currentRound);
-	roundsStore.activeRound = roundsStore.currentRound;
-	await roundsStore.fillRound(roundsStore.activeRound);
+	// 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);
+		var walletClient = await getWalletClient();
+		console.log("walletClient", walletClient);
+		if (account.address) {
+			walletStore.address = account.address;
+			walletStore.connected = true;
+		} else {
+			walletStore.address = null;
+			walletStore.connected = false;
+		}
+	});
 });
 </script>
 
 <template>
-	<navbar />
+	<navbar @show-panel="((value) => showPanel = value)"/>
+    <slideout-panel v-model="showPanel">
+    <connect-wallet></connect-wallet>
+    </slideout-panel>
 	<div class="main">
 		<RouterView />
 	</div>