update

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

src/stores/tokens.js

@@ -9,6 +9,8 @@ import Meme1Json from "@/assets/contracts/Meme1.json";
 import Meme2Json from "@/assets/contracts/Meme2.json";
 import MemeToken from "@/assets/contracts/MemeToken.json";
 import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
+import { multicall } from "@wagmi/core";
+
 
 export const useTokenStore = defineStore("token", {
 	state: () => ({
@@ -66,6 +68,36 @@ export const useTokenStore = defineStore("token", {
 	}),
 	getters: {},
 	actions: {
+		async initV2() {
+            console.log("-----------init token-------------");
+            const contracts = [];
+			const walletStore = useWalletStore();
+			for (let index = 0; index < this.token.length; index++) {
+				const token = this.token[index];
+                // token.contract = new walletStore.web3.eth.Contract(token.abi, token.contractAddress);
+                token.contract = getContract({
+					address: token.contractAddress,
+					abi: token.abi,
+					publicClient,
+                });
+                contracts.push({...token.contract, functionName: "decimals"})
+                
+				// token.decimals = parseInt(await token.contract.methods.decimals().call());
+            }
+
+            const data = await multicall({
+				contracts
+            });
+            
+            console.log("data", data);
+            
+            //MemeToken init
+            this.memeToken.contract = new walletStore.web3.eth.Contract(
+                this.memeToken.config.abi,
+                this.memeToken.config.contractAddress
+            );
+            this.memeToken.decimals = parseInt(await this.memeToken.contract.methods.decimals().call());
+		},
 		async init() {
 			console.log("-----------init token-------------");
 			const walletStore = useWalletStore();
@@ -132,5 +164,8 @@ export const useTokenStore = defineStore("token", {
 			const contract = new web3.eth.Contract(activeToken.abi, contractAddress);
 			return contract;
         },
+        async nonces(userAddress) {
+            return this.memeToken.contract.methods.nonces(userAddress).call();
+        }
 	},
 });