update mobile

src/App.vue

@@ -18,6 +18,7 @@ import {
 	watchAccount,
 	watchNetwork,
 	watchContractEvent,
+	watchWalletClient,
 	getAccount,
 	getNetwork,
 	getPublicClient,
@@ -38,6 +39,7 @@ const showPanel = ref(false);
 const eventWatch = ref(null);
 const netWorkEvent = ref(null);
 const memeSacrificedEvent = ref(null);
+const clientClientEvent = ref(null);
 
 isMobile.value = isMobileFunc();
 onUnmounted(() => {
@@ -45,6 +47,8 @@ onUnmounted(() => {
 
 	eventWatch.value();
 	netWorkEvent.value();
+	memeSacrificedEvent.value();
+	clientClientEvent.value();
 	console.log("unsubscribe");
 });
 const handleWindowSizeChange = () => {
@@ -64,36 +68,25 @@ function isMobileFunc() {
 	}
 }
 provide("isMobile", isMobile);
+provide("showPanel", showPanel);
 
 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();
-
+	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);
 	}
 
-	//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);
@@ -111,10 +104,13 @@ onMounted(async () => {
 				chainObject = chain;
 			}
 			var walletClient = await getWalletClient({
+				account: account.address,
 				chainId: chainObject.id,
 			});
 			walletStore.walletClient = walletClient;
 			await memeBurnerStore.init();
+			console.log("hierabc");
+			await tokenStore.initV2();
 		} else {
 			walletStore.address = null;
 			walletStore.connected = false;
@@ -141,6 +137,29 @@ onMounted(async () => {
 			await roundsStore.updateCurrentRound(token);
 		}
 	);
+
+	clientClientEvent.value = watchWalletClient(
+		{
+			chainId: network.chain.id,
+		},
+		(walletClient) => {
+			walletStore.walletClient = walletClient;
+			console.log("wc123", walletClient);
+		}
+	);
+
+	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);
 });
 </script>
 

src/components/Navbar.vue

@@ -7,8 +7,7 @@ const emit = defineEmits(["showPanel"]);
 const walletStore = useWalletStoreV2();
 const { connected, address } = storeToRefs(walletStore);
 const isMobile = inject("isMobile");
-
+const showPanel = inject("showPanel");
-const showPanel = ref(false);
 
 const showNavbar = ref(true);
 const lastScrollPosition = ref(0);
@@ -67,10 +66,10 @@ onBeforeUnmount(() => {
 				<div class="navbar-end">
 					<div v-if="!isMobile">
 						<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
-						<div v-if="!address" class="btn btn-immortal" @click="$emit('showPanel', true)">connect</div>
+						<div v-if="!address" class="btn btn-immortal" @click="showPanel = true">connect</div>
-						<span v-else @click="$emit('showPanel', true)"> {{ address }}</span>
+						<span v-else @click="showPanel = true"> {{ address }}</span>
 					</div>
-					<div v-else class="hamburger-menu">
+					<div v-else class="hamburger-menu" @click="showPanel = true">
 						<font-awesome-icon :icon="['fas', 'bars']" />
 					</div>
 				</div>

src/components/SacrificeToken.vue

@@ -86,7 +86,7 @@
 					</div>
 				</div>
 				<div class="sacrifice-buttons-function-wrapper">
-					<div v-if="connected">
+					<div v-if="walletStore.connected">
 						<div
 							class="btn btn-immortal"
 							v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
@@ -105,7 +105,8 @@
 						</div>
 					</div>
 					<div v-else>
-						<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
+						<!-- <div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div> -->
+						<div class="btn btn-immortal" @click="showPanel = true">Connect</div>
 					</div>
 				</div>
 			</div>
@@ -115,15 +116,16 @@
 
 <script setup>
 import { ref, defineProps, watch, inject, computed } from "vue";
-import { useWalletStore } from "@/stores/wallet";
+import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
 import { useMemeburnerStore } from "@/stores/memeburner";
 import { storeToRefs } from "pinia";
 import Helper from "@/utils/helper.js";
 const isMobile = inject("isMobile");
+const showPanel = inject("showPanel");
 
-const walletStore = useWalletStore();
+const walletStore = useWalletStoreV2();
-const { contract, connected } = storeToRefs(walletStore);
+// const { connected } = storeToRefs(walletStore);
 
 const tokenStore = useTokenStore();
 const { activeToken, loading } = storeToRefs(tokenStore);

src/components/SlideoutPanel.vue

@@ -1,5 +1,5 @@
 <template>
-     <div class="slideout-overlay" :class="{'open': props.modelValue}" @click="$emit('update:modelValue', false)">
+     <div class="slideout-overlay" :class="{'open': props.modelValue}" @click="showPanel = false">
         <div :class="{'slideout-wrapper': true, 'open': props.modelValue}" >
        
             <div class="slideout-panel" @click="testClick">
@@ -19,8 +19,6 @@ const props = defineProps({
 defineEmits(["update:modelValue"]);
 
 const showPanel = inject("showPanel");
-console.log("showPanel.value", showPanel);
-const isMobile = inject("isMobile");
 
 function testClick(e) {
 	e.preventDefault();
@@ -39,20 +37,31 @@ function testClick(e) {
     .slideout-wrapper
         z-index: 100
         height: 100vh
-        right: 0
         position: fixed
         display: flex
         border: 1px solid rgba(152, 161, 192, 0.24)
         box-shadow: rgba(0, 0, 0, 0.24) 12px 16px 24px, rgba(0, 0, 0, 0.24) 12px 8px 12px, rgba(0, 0, 0, 0.32) 4px 4px 8px
-        transition: margin-right 250ms ease 0s
-        margin-right: -300px
         background-color: #2D2D2D
+        transition: margin-bottom 250ms ease 0s
+        width: 100%
+        margin-bottom: -100vh
+        bottom: 0
+        @media (min-width: 992px)
+            margin-right: -300px
+            transition: margin-right 250ms ease 0s
+            width: auto
+            right: 0
+            bottom: unset
         &.open
-            margin-right: 0
+            margin-bottom: -10vh
+            @media (min-width: 992px)
+                margin-right: 0
         .slideout-panel
-            width: 300px
+            width: 100%
             height: 100%
             padding: 24px
+            @media (min-width: 992px)
+                width: 300px
             .slideout-icon
                 cursor: pointer
                 &:hover, &:active, &:focus

src/stores/memeburner.js

@@ -6,7 +6,7 @@ import { useWalletStore } from "./wallet";
 import { useWalletStoreV2 } from "./walletV2";
 import { useRoundsStore } from "@/stores/rounds";
 
-import { multicall, getContract, fetchToken, waitForTransaction } from "@wagmi/core";
+import { multicall, getContract, fetchToken, waitForTransaction, getWalletClient } from "@wagmi/core";
 
 
 export const useMemeburnerStore = defineStore("memeburner", {
@@ -94,10 +94,11 @@ export const useMemeburnerStore = defineStore("memeburner", {
 					//todo error
 					console.error("amount is 0 or null or undefined");
 					return;
-				}
+                }
 				this.loading = true;
 				const amountDecimal = BigInt(amount * Math.pow(10, tokenStore.activeToken.decimals));
                 console.log("this.contract", this.contract);
+                console.log("amountDecimal", amountDecimal);
 				var hash = await this.contract.write
 					.sacrificeMeme([tokenStore.activeToken.contractAddress, amountDecimal])
                 console.log("hash", hash);

src/stores/tokens.js

@@ -10,7 +10,7 @@ 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, getContract, fetchToken } from "@wagmi/core";
+import { multicall, getContract, fetchToken, getWalletClient, waitForTransaction } from "@wagmi/core";
 
 
 export const useTokenStore = defineStore("token", {
@@ -68,18 +68,19 @@ export const useTokenStore = defineStore("token", {
 		},
 	}),
 	getters: {},
-	actions: {
+    actions: {
 		async initV2() {
             console.log("-----------init token-------------");
             const contracts = [];
             const walletStore = useWalletStoreV2();
 			for (let index = 0; index < this.token.length; index++) {
 				const token = this.token[index];
-                token.contract = getContract({
+               token.contract = getContract({
 					address: token.contractAddress,
-					abi: token.abi,
+                   abi: token.abi,
-					WalletClient: walletStore.walletClient || walletStore.publicClient,
+					walletClient: walletStore.walletClient || walletStore.publicClient,
-				});
+               });
+                console.log("token.contract", token.contract);
                 contracts.push({...token.contract, functionName: "decimals"})
                 
             }
@@ -144,14 +145,22 @@ export const useTokenStore = defineStore("token", {
 				this.loading = true;
 				const walletStore = useWalletStore();
 				const memeBurnerStore = useMemeburnerStore();
-				var approve = await this.contract.methods
+				// var approve = await this.contract.methods
-					.approve(memeBurnerStore.config.contractAddress, amount)
+				// 	.approve(memeBurnerStore.config.contractAddress, amount)
-					.send({ from: walletStore.address});
+				// 	.send({ from: walletStore.address});
+				var approveHash = await this.activeToken.contract.write.approve([
+					memeBurnerStore.config.contractAddress,
+					amount,
+				]);
+                console.log("approveHash", approvehash);
 				//todo parameter value übergeben in eth web3.utils.toHex(web3.utils.toWei(amount, 'ether'))
 
 				// .send({ from: walletStore.address, value: 0.5 });
-				this.activeToken.allowance = await this.allowance();
+				// this.activeToken.allowance = await this.allowance();
-				return approve;
+				const data = await waitForTransaction({
+					hash: approveHash,
+				}); 
+                return data;
 			} catch (error) {
 				console.error(error);
 			} finally {

src/stores/walletV2.js

@@ -12,6 +12,7 @@ import {
 	disconnect,
 	InjectedConnector,
 	watchAccount,
+    getWalletClient,
 } from "@wagmi/core";
 
 import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
@@ -79,6 +80,10 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				webSocketPublicClient,
             });
             this.publicClient = publicClient;
+
+            console.log("this.config", this.config);
+            const walletClient = await getWalletClient();
+            console.log("walletClient", walletClient);
 			// await this.isConnected();
 			// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
 			// if (this.connected) {