cycleview

great start

Co-authored-by: Johann Barbie <johannbarbie@me.com>
Reviewed-on: http://gitea.loseyourip.com:4000/cindylouwho/ImmortalClanVue/pulls/1

package.json

@@ -1,38 +1,37 @@
 {
-    "name": "vue-ethereum2",
-    "version": "0.0.0",
-    "private": true,
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "preview": "vite preview",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
-    },
-    "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.4.0",
-        "@fortawesome/free-brands-svg-icons": "^6.4.0",
-        "@fortawesome/free-solid-svg-icons": "^6.4.0",
-        "@fortawesome/vue-fontawesome": "^3.0.3",
-        "@walletconnect/ethereum-provider": "^2.9.0",
-        "@walletconnect/modal": "^2.6.0",
-        "@walletconnect/web3-provider": "^1.8.0",
-        "@web3modal/html": "^2.7.0",
-        "abi-decoder": "^2.4.0",
-        "ethers": "^6.6.3",
-        "pinia": "^2.0.36",
-        "pinia-plugin-persistedstate": "^3.1.0",
-        "sass": "^1.62.1",
-        "swiper": "^9.4.1",
-        "vue": "^3.3.2",
-        "vue-router": "^4.2.0",
-        "web3": "^v1.9.0"
-    },
-    "devDependencies": {
-        "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-        "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-        "@vitejs/plugin-vue": "^4.2.3",
-        "eslint": "^8.39.0",
-        "eslint-plugin-vue": "^9.11.0",
-        "vite": "^4.3.5"
-    }
+	"name": "vue-ethereum2",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview",
+		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+	},
+	"dependencies": {
+		"@fortawesome/fontawesome-svg-core": "^6.4.0",
+		"@fortawesome/free-brands-svg-icons": "^6.4.0",
+		"@fortawesome/free-solid-svg-icons": "^6.4.0",
+		"@fortawesome/vue-fontawesome": "^3.0.3",
+		"@wagmi/core": "^1.3.8",
+		"abi-decoder": "^2.4.0",
+		"ethers": "^6.6.3",
+		"pinia": "^2.0.36",
+		"pinia-plugin-persistedstate": "^3.1.0",
+		"sass": "^1.62.1",
+		"swiper": "^9.4.1",
+		"viem": "^1.5.4",
+		"vue": "^3.3.2",
+		"vue-router": "^4.2.0",
+		"wagmi": "^1.3.9",
+		"web3": "^v1.9.0"
+	},
+	"devDependencies": {
+		"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+		"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+		"@vitejs/plugin-vue": "^4.2.3",
+		"eslint": "^8.39.0",
+		"eslint-plugin-vue": "^9.11.0",
+		"vite": "^4.3.5"
+	}
 }

public/assets/img/connectors/coinbaseWallet.svg

@@ -0,0 +1,13 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13571_129878)">
+<rect width="40" height="40" fill="#0052FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3312 0H31.6672C36.2704 0 40 4.0128 40 8.9632V31.0368C40 35.9872 36.2704 40 31.6688 40H8.3312C3.7296 40 0 35.9872 0 31.0368V8.9632C0 4.0128 3.7296 0 8.3312 0Z" fill="#0052FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9989 5.79443C27.8453 5.79443 34.2053 12.1544 34.2053 20.0008C34.2053 27.8472 27.8453 34.2072 19.9989 34.2072C12.1525 34.2072 5.79254 27.8472 5.79254 20.0008C5.79254 12.1544 12.1525 5.79443 19.9989 5.79443Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5005 15.459H23.4973C24.0733 15.459 24.5389 15.9614 24.5389 16.579V23.419C24.5389 24.0382 24.0717 24.539 23.4973 24.539H16.5005C15.9245 24.539 15.4589 24.0366 15.4589 23.419V16.579C15.4589 15.9614 15.9261 15.459 16.5005 15.459Z" fill="#0052FF"/>
+</g>
+<defs>
+<clipPath id="clip0_13571_129878">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/assets/img/connectors/metaMask.svg

@@ -0,0 +1,15 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#F7F9FB"/>
+<path d="M32.6877 6.6665L22.0555 14.5632L24.0216 9.90427L32.6877 6.6665Z" fill="#E2761B" stroke="#E2761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.1433 6.6665L18.6901 14.638L16.8201 9.90427L8.1433 6.6665ZM28.8628 24.9711L26.0311 29.3095L32.0899 30.9764L33.8317 25.0672L28.8628 24.9711ZM7.0213 25.0672L8.75238 30.9764L14.8112 29.3095L11.9795 24.9711L7.0213 25.0672Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.4697 17.641L12.7814 20.1949L18.7974 20.462L18.5837 13.9972L14.4697 17.641ZM26.3629 17.641L22.1955 13.9224L22.0565 20.462L28.0619 20.1949L26.3629 17.641ZM14.8117 29.3097L18.4234 27.5466L15.3032 25.1103L14.8117 29.3097ZM22.4092 27.5466L26.0316 29.3097L25.5294 25.1103L22.4092 27.5466Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.0316 29.3095L22.4091 27.5464L22.6976 29.9079L22.6656 30.9017L26.0316 29.3095ZM14.8116 29.3095L18.1776 30.9017L18.1562 29.9079L18.4233 27.5464L14.8116 29.3095Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.2319 23.5497L15.2185 22.6628L17.345 21.6904L18.2319 23.5497ZM22.6023 23.5497L23.4892 21.6904L25.6264 22.6628L22.6023 23.5497Z" fill="#233447" stroke="#233447" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.8106 29.3092L15.3236 24.9708L11.9789 25.067L14.8106 29.3092ZM25.5177 24.9708L26.0306 29.3092L28.8623 25.067L25.5177 24.9708ZM28.0609 20.1943L22.0555 20.4615L22.6112 23.5496L23.4981 21.6903L25.6352 22.6627L28.0609 20.1943ZM15.2167 22.6627L17.3538 21.6903L18.2301 23.5496L18.7964 20.4615L12.7804 20.1943L15.2167 22.6627Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.7814 20.1943L15.3032 25.1097L15.2177 22.6627L12.7814 20.1943ZM25.6362 22.6627L25.5294 25.1097L28.0619 20.1943L25.6362 22.6627ZM18.7974 20.4615L18.2311 23.5496L18.9363 27.1935L19.0966 22.3956L18.7974 20.4615ZM22.0565 20.4615L21.768 22.3849L21.8963 27.1935L22.6122 23.5496L22.0565 20.4615Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.613 23.5495L21.8971 27.1933L22.41 27.546L25.5302 25.1096L25.637 22.6626L22.613 23.5495ZM15.2185 22.6626L15.304 25.1096L18.4242 27.546L18.9371 27.1933L18.2319 23.5495L15.2185 22.6626Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.6656 30.9022L22.6976 29.9085L22.4305 29.6734H18.402L18.1562 29.9085L18.1776 30.9022L14.8116 29.3101L15.987 30.2718L18.3699 31.9281H22.4625L24.8561 30.2718L26.0316 29.3101L22.6656 30.9022Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.409 27.5465L21.8961 27.1938H18.9362L18.4233 27.5465L18.1561 29.908L18.4019 29.6729H22.4304L22.6975 29.908L22.409 27.5465Z" fill="#161616" stroke="#161616" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.1371 15.0761L34.0454 10.7164L32.6883 6.6665L22.4087 14.2961L26.3624 17.6407L31.951 19.2756L33.1905 17.833L32.6562 17.4484L33.5111 16.6683L32.8486 16.1554L33.7034 15.5036L33.1371 15.0761ZM6.79688 10.7164L7.70516 15.0761L7.12813 15.5036L7.98299 16.1554L7.33116 16.6683L8.18601 17.4484L7.65173 17.833L8.88058 19.2756L14.4692 17.6407L18.4229 14.2961L8.14327 6.6665L6.79688 10.7164Z" fill="#763D16" stroke="#763D16" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.951 19.2761L26.3624 17.6412L28.0614 20.1951L25.5289 25.1105L28.8628 25.0678H33.8317L31.951 19.2761ZM14.4692 17.6412L8.88061 19.2761L7.0213 25.0678H11.9795L15.3027 25.1105L12.7809 20.1951L14.4692 17.6412ZM22.0561 20.4622L22.4087 14.2966L24.0329 9.90479H16.8201L18.4229 14.2966L18.7969 20.4622L18.9252 22.407L18.9358 27.1942H21.8958L21.9171 22.407L22.0561 20.4622Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/img/connectors/walletConnect.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#3396FF"/>
+<path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#3396FF"/>
+<path d="M12.2327 14.8836C16.5225 10.7003 23.4779 10.7003 27.7677 14.8836L28.284 15.3871C28.4985 15.5962 28.4985 15.9353 28.284 16.1445L26.5179 17.8668C26.4106 17.9713 26.2368 17.9713 26.1295 17.8668L25.419 17.1739C22.4263 14.2555 17.5741 14.2555 14.5813 17.1739L13.8204 17.9159C13.7132 18.0205 13.5393 18.0205 13.4321 17.9159L11.666 16.1936C11.4514 15.9845 11.4514 15.6453 11.666 15.4362L12.2327 14.8836ZM31.4203 18.4454L32.9922 19.9782C33.2067 20.1874 33.2067 20.5265 32.9922 20.7356L25.9045 27.6473C25.69 27.8565 25.3422 27.8565 25.1277 27.6473L20.0973 22.742C20.0437 22.6896 19.9568 22.6896 19.9031 22.742L14.8728 27.6473C14.6583 27.8565 14.3106 27.8565 14.096 27.6473L7.00816 20.7355C6.79367 20.5264 6.79367 20.1873 7.00816 19.9782L8.58004 18.4453C8.79454 18.2362 9.1423 18.2362 9.35679 18.4453L14.3873 23.3508C14.4409 23.4031 14.5278 23.4031 14.5814 23.3508L19.6117 18.4453C19.8262 18.2361 20.1739 18.2361 20.3885 18.4453L25.4189 23.3508C25.4726 23.4031 25.5595 23.4031 25.6131 23.3508L30.6436 18.4454C30.858 18.2362 31.2058 18.2362 31.4203 18.4454Z" fill="white"/>
+</svg>

src/App.vue

@@ -3,32 +3,59 @@ 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";
 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;
@@ -41,25 +68,77 @@ 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 walletStore.init();
+	// await tokenStore.initV2();
+	// 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;
+	// 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 />
+	<navbar @show-panel="(value) => (showPanel = value)" />
+	<slideout-panel v-model="showPanel">
+		<connect-wallet></connect-wallet>
+	</slideout-panel>
 	<div class="main">
 		<RouterView />
 	</div>

src/assets/sass/main.sass

@@ -39,10 +39,10 @@ body
 .container
     margin-right: auto
     margin-left: auto
+    padding-right: 15px
+    padding-left: 15px
     @media (min-width: 992px)
         max-width: 800px
-        padding-right: 15px
-        padding-left: 15px
 
 h1
     font-weight: 700

src/components/ConnectWallet.vue

@@ -0,0 +1,119 @@
+<template>
+	<h3>Connect Wallet</h3>
+	<div class="connectors-wrapper" v-if="!walletStore.connected">
+		<div
+			class="connectors-element"
+			v-for="connector in walletStore.config?.connectors"
+			@click="connectWallet(connector)"
+		>
+			<div class="connector-icon">
+				<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
+			</div>
+			<div class="connector-name">{{ connector.name }}</div>
+		</div>
+	</div>
+	<div class="btn btn-immortal" v-else @click="disconnectWallet">disconnect</div>
+	<div>Connected: {{ walletStore.connected }}</div>
+</template>
+
+<script setup>
+import { ref, toRaw, onMounted, onUnmounted, getCurrentInstance } from "vue";
+import { useWalletStoreV2 } from "@/stores/walletV2";
+import Meme1Json from "@/assets/contracts/Meme1.json";
+
+import {
+	createConfig,
+	configureChains,
+	mainnet,
+	getAccount,
+	getContract,
+	connect,
+	disconnect,
+	InjectedConnector,
+	watchAccount,
+} from "@wagmi/core";
+
+const walletStore = useWalletStoreV2();
+
+const goerliKey = import.meta.env.VITE_GOERLI_KEY;
+
+const fromAddress = ref(null);
+
+const accountSub = ref(null);
+
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	console.log("walletStore.config?.connectors", walletStore.config?.connectors);
+});
+
+// config.value = createConfig({
+// 	autoConnect: true,
+// 	connectors: [
+// 		new CoinbaseWalletConnector({
+// 			chains,
+// 			options: {
+// 				appName: "wagmi demo",
+// 			},
+// 		}),
+// 		new MetaMaskConnector({ chains }),
+// 		new WalletConnectConnector({
+// 			chains,
+// 			options: {
+// 				projectId: projectId,
+// 				showQrModal: true,
+// 				metadata: {
+// 					name: "Bloodline-App",
+// 					description: "TODO Bloodline Description",
+// 					url: "https://gitea.loseyourip.com/",
+// 					icons: [
+// 						"https://gitea.loseyourip.com/assets/img/vampir.png",
+// 					],
+// 				},
+// 			},
+// 		}),
+// 	],
+// 	publicClient,
+// 	webSocketPublicClient,
+// });
+// console.log("config", config);
+
+async function disconnectWallet() {
+	console.log("disconnectWallet");
+	try {
+		instance.parent.emit("update:modelValue", false);
+		await disconnect();
+		// walletStore.connected = false;
+		// walletStore.address = null;
+	} catch (error) {
+		console.log("error", error);
+	}
+}
+
+async function connectWallet(connector) {
+	instance.parent.emit("update:modelValue", false);
+	await walletStore.connectWallet(toRaw(connector));
+}
+</script>
+
+<style lang="sass">
+.connectors-wrapper
+    display: flex
+    flex-direction: column
+    .connectors-element
+        display: flex
+        padding: 12px
+        border: 1px solid rgba(152, 161, 192, 0.24)
+        background-color: #202020
+        &:hover, &:active, &:focus
+            background-color: lighten(#202020, 20%)
+            cursor: pointer
+        .connector-icon
+            border-radius: 12px
+            width: 40px
+            overflow: hidden
+            height: 40px
+        .connector-name
+            padding: 0 8px
+            align-self: center
+</style>

src/components/Navbar.vue

@@ -1,17 +1,20 @@
 <script setup>
 import { storeToRefs } from "pinia";
 import { ref, onMounted, onBeforeUnmount, inject } from "vue";
-import { useWalletStore } from "@/stores/wallet";
-const walletStore = useWalletStore();
+import { useWalletStoreV2 } from "@/stores/walletV2";
+const emit = defineEmits(["showPanel"]);
+
+const walletStore = useWalletStoreV2();
 const { connected, address } = storeToRefs(walletStore);
 const isMobile = inject("isMobile");
 
+const showPanel = ref(false);
+
 const showNavbar = ref(true);
 const lastScrollPosition = ref(0);
 
 function onScroll() {
-	const currentScrollPosition =
-		window.pageYOffset || document.documentElement.scrollTop;
+	const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
 	if (currentScrollPosition < 0) {
 		return;
 	}
@@ -37,7 +40,9 @@ onBeforeUnmount(() => {
 						<img alt="logo" class="logo" src="/assets/img/vampir.png" />
 					</router-link>
 				</div>
-				<div class="navbar-text">Bloodline</div>
+				<div class="navbar-text">
+					<router-link to="/">Bloodline</router-link>
+				</div>
 				<div class="navbar-center" v-if="!isMobile">
 					<div class="navbar-social-links">
 						<div class="social-bloodline-badge">
@@ -62,8 +67,9 @@ onBeforeUnmount(() => {
 				</div>
 				<div class="navbar-end">
 					<div v-if="!isMobile">
-						<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
-						<span v-else> {{ address }}</span>
+						<!-- <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>
+						<span v-else @click="$emit('showPanel', true)"> {{ address }}</span>
 					</div>
 					<div v-else class="hamburger-menu">
 						<font-awesome-icon :icon="['fas', 'bars']" />
@@ -109,6 +115,9 @@ header
                 line-height: 73.107px
                 @media (min-width: 992px)
                     font-size: 64px
+                a
+                    text-decoration: none
+                    color: white
             .navbar-center
                 display: flex
                 margin-left: auto

src/components/SacrificeToken.vue

@@ -117,7 +117,7 @@
 import { ref, defineProps, watch, inject, computed } from "vue";
 import { useWalletStore } from "@/stores/wallet";
 import { useTokenStore } from "@/stores/tokens";
-import { useMemeburnerStore } from "@/stores/memeBurner";
+import { useMemeburnerStore } from "@/stores/memeburner";
 import { storeToRefs } from "pinia";
 import Helper from "@/utils/helper.js";
 const isMobile = inject("isMobile");
@@ -154,7 +154,7 @@ async function getRewardsFor(e) {
 		return;
 	}
 	console.log("activeToken.value.decimals", activeToken.value.decimals);
-	const rewardsForResult = await memeburnerStore.getRewardsFor(
+	const rewardsForResult = await memeburnerStore.getRewardFor(
 		BigInt(e.target.value * Math.pow(10, activeToken.value.decimals))
 	);
 	// var test = await memeburnerStore.getRewardsFor(10000);
@@ -167,7 +167,7 @@ async function getRewardsFor(e) {
 		Math.pow(10, tokenStore.memeToken.decimals)
 	);
 	output.value =
-		rewardsForResult / Math.pow(10, tokenStore.memeToken.decimals);
+		rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
 }
 
 async function addTokens(value) {

src/components/SlideoutPanel.vue

@@ -0,0 +1,62 @@
+<template>
+     <div class="slideout-overlay" :class="{'open': props.modelValue}" @click="$emit('update:modelValue', false)">
+        <div :class="{'slideout-wrapper': true, 'open': props.modelValue}" >
+       
+            <div class="slideout-panel" @click="testClick">
+                <slot></slot>
+            </div>
+        </div>
+     </div>
+</template>
+
+<script setup>
+import { inject, watchEffect } from "vue";
+
+const props = defineProps({
+	modelValue: Boolean,
+});
+
+defineEmits(["update:modelValue"]);
+
+const showPanel = inject("showPanel");
+console.log("showPanel.value", showPanel);
+const isMobile = inject("isMobile");
+
+function testClick(e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+</script>
+
+<style lang="sass">
+.slideout-overlay
+    background-color: rgba(0,0,0,.5)
+    z-index: 100
+    &.open
+        height: 100%
+        width: 100%
+        position: fixed
+    .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
+        &.open
+            margin-right: 0
+        .slideout-panel
+            width: 300px
+            height: 100%
+            padding: 24px
+            .slideout-icon
+                cursor: pointer
+                &:hover, &:active, &:focus
+                    background-color: lighten(#2D2D2D, 20%)
+                svg
+                    font-size: 30px
+</style>

src/helper/helper.js

@@ -6,7 +6,8 @@ export function getImageUrl(url) {
 export function getPercentage(amount, goal) {
     console.log("amount", amount);
     console.log("goal", goal);
-    return ((amount / goal) * 100).toFixed(2);
+
+    return ((Number(amount) / Number(goal)) * 100).toFixed(2);
 }
 
 

src/main.js

@@ -14,12 +14,26 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
-import { faArrowDown, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowRight, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
 
 
 /* add icons to the library */
-library.add(faArrowDown, faDiscord, faTwitter, faTelegram, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars);
+library.add(
+    faArrowDown,
+    faArrowRight,
+	faDiscord,
+	faTwitter,
+	faTelegram,
+	faSpinner,
+	faPlus,
+	faCaretLeft,
+	faCaretRight,
+	faBars,
+	faAnglesRight,
+	faChevronDown,
+	faChevronUp
+);
 
 const app = createApp(App)
 

src/router/index.js

@@ -1,5 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.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 {
+	getAccount,
+} from "@wagmi/core";
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -22,7 +33,48 @@ const router = createRouter({
 			name: "Test",
 			component: () => import("../views/TestView.vue"),
 		},
+		{
+			path: "/wagmi",
+			name: "Wagmi",
+			component: () => import("../views/WagmiView.vue"),
+		},
+		{
+			path: "/profile",
+			name: "Profile",
+			component: () => import("../views/ProfileView.vue"),
+		},
+		{
+			path: "/cycle",
+			name: "Cycle",
+			component: () => import("../views/CycleView.vue"),
+		},
 	],
 });
 
+router.beforeEach(async (to, from) => {
+	//init
+    const tokenStore = useTokenStore();
+	const memeBurnerStore = useMemeburnerStore();
+	const rewardLockerStore = useRewardLockerStore();
+	const roundsStore = useRoundsStore();
+    const walletStore = useWalletStoreV2();
+    
+    if (!walletStore.publicClient) {
+        await walletStore.init();
+        await tokenStore.initV2();
+        await memeBurnerStore.init();
+        await rewardLockerStore.init();
+        await memeBurnerStore.init();
+        
+        
+        if (!roundsStore.currentRound) {
+            roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
+            console.log("roundsStore.currentRound", roundsStore.currentRound);
+            roundsStore.activeRound = roundsStore.currentRound;
+        }
+    }
+		// initContracts
+	return true;
+});
+
 export default router

src/stores/memeburner.js

@@ -3,78 +3,88 @@ import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
 import { useTokenStore } from "./tokens";
 import { useMultiCallStore } from "./multicall";
 import { useWalletStore } from "./wallet";
+import { useWalletStoreV2 } from "./walletV2";
 import { useRoundsStore } from "@/stores/rounds";
 
+import { multicall, getContract, fetchToken, waitForTransaction } from "@wagmi/core";
+
+
 export const useMemeburnerStore = defineStore("memeburner", {
 	state: () => ({
 		config: MemeBurnerJson,
-        contract: null,
-        loading: false,
-        
+		contract: null,
+		loading: false,
 	}),
 	getters: {},
 	actions: {
 		async init() {
 			console.log("-----------init memeburner-------------");
-            const walletStore = useWalletStore();
-            const roundsStore = useRoundsStore();
-            
-            this.contract = new walletStore.web3.eth.Contract(this.config.abi, this.config.contractAddress);
-            
-
-            const websocketMemeBurner = new walletStore.web3socket.eth.Contract(
-				this.config.abi,
-				this.config.contractAddress
-			);
-			websocketMemeBurner.events
-				.MemeSacrificed()
-				.on("data", async (event) => {
-					console.log("sacrificedAmount", event.returnValues.sacrificedAmount);
-					console.log("sacrificedToken", event.returnValues.sacrificedToken);
-					await roundsStore.updateCurrentRound(
-						event.returnValues.sacrificedToken,
-						event.returnValues.sacrificedAmount
-					);
-				})
-				.on("error", (error) => console.log("MemeSacrificederror", error));
+			const walletStore = useWalletStoreV2();
+			// const roundsStore = useRoundsStore();
+            console.log("walletStore.walletClient", walletStore.walletClient);
+			// this.contract = new walletStore.web3.eth.Contract(this.config.abi, this.config.contractAddress);
+			this.contract = getContract({
+				address: this.config.contractAddress,
+                abi: this.config.abi,
+                walletClient: walletStore.walletClient || walletStore.publicClient,
+            });
+            console.log("this.contract", this.contract);
+			// const websocketMemeBurner = new walletStore.web3socket.eth.Contract(
+			// 	this.config.abi,
+			// 	this.config.contractAddress
+			// );
+			// websocketMemeBurner.events
+			// 	.MemeSacrificed()
+			// 	.on("data", async (event) => {
+			// 		console.log("sacrificedAmount", event.returnValues.sacrificedAmount);
+			// 		console.log("sacrificedToken", event.returnValues.sacrificedToken);
+			// 		await roundsStore.updateCurrentRound(
+			// 			event.returnValues.sacrificedToken,
+			// 			event.returnValues.sacrificedAmount
+			// 		);
+			// 	})
+			// 	.on("error", (error) => console.log("MemeSacrificederror", error));
 		},
-		async getRewardsFor(amount) {
+		async getRewardFor(amount) {
 			const tokenStore = useTokenStore();
-			var rewards = await this.contract.methods
-				.getRewardFor(tokenStore.activeToken.contractAddress, amount)
-				.call();
+			// var rewards = await this.contract.methods
+			// 	.getRewardFor(tokenStore.activeToken.contractAddress, amount)
+			// 	.call();
+            const rewards = await this.contract.read.getRewardFor([tokenStore.activeToken.contractAddress, amount]);
+            console.log("rewards", rewards);
 			return rewards;
 		},
 		async getCurrentRound() {
-			return await this.contract.methods.currentRound().call();
+			return await this.contract.read.currentRound();
 		},
 		async getGoal(roundnumber) {
-			return await this.contract.methods.rounds(roundnumber).call();
+			return await this.contract.read.rounds([roundnumber]);
 		},
 		//returns participated, amount achieved
 		async getSacrificedMeme(roundnumber, tokenAddress) {
-			return await this.contract.methods.getSacrificedMeme(roundnumber, tokenAddress).call();
-        },
-        async getAmountToReachGoal(tokenAddress) {
-            return await this.contract.methods.getAmountToReachGoal(tokenAddress).call();
-        },
+			return await this.contract.read.getSacrificedMeme([roundnumber, tokenAddress]);
+		},
+		async getAmountToReachGoal(tokenAddress) {
+			return await this.contract.read.getAmountToReachGoal([tokenAddress]);
+		},
 		async getSacrificedRound(roundnumber) {
 			console.log("getSacrificedRound", roundnumber);
 			const tokenStore = useTokenStore();
-			const calls = [];
-			// const calls1 = [];
+			const contracts = [];
 			for (let index = 0; index < tokenStore.token.length; index++) {
 				const token = tokenStore.token[index];
 				console.log("token.contractAddress", token.contractAddress);
 				console.log("roundnumber", roundnumber);
-				var test = await this.getSacrificedMeme(roundnumber, token.contractAddress);
-                console.log(token.name, test);
-                calls.push(this.contract.methods.getSacrificedMeme(roundnumber, token.contractAddress));
-                // calls1.push(this.contract.methods.getAmountToReachGoal(token.contractAddress));
+				// contracts.push(this.contract.methods.getSacrificedMeme(roundnumber, token.contractAddress));
+				contracts.push({ ...this.contract, functionName: "getSacrificedMeme", args: [roundnumber, token.contractAddress] });
 			}
-			console.log("this.contract", this.contract);
-			const multicallStore = useMultiCallStore();
-			return await multicallStore.aggregate(calls);
+			// console.log("this.contract", this.contract);
+			// const multicallStore = useMultiCallStore();
+			// return await multicallStore.aggregate(calls);
+            const data = await multicall({
+				contracts,
+            });
+            return data;
 		},
 		async sacrificeMeme(amount) {
 			const walletStore = useWalletStore();
@@ -87,20 +97,22 @@ export const useMemeburnerStore = defineStore("memeburner", {
 				}
 				this.loading = true;
 				const amountDecimal = BigInt(amount * Math.pow(10, tokenStore.activeToken.decimals));
-				var reward = await this.contract.methods
-					.sacrificeMeme(tokenStore.activeToken.contractAddress, amountDecimal)
-					.send({ from: walletStore.address });
-				console.log("reward", reward);
-				tokenStore.activeToken.allowance = await tokenStore.allowance();
+                console.log("this.contract", this.contract);
+				var hash = await this.contract.write
+					.sacrificeMeme([tokenStore.activeToken.contractAddress, amountDecimal])
+                console.log("hash", hash);
+                const data = await waitForTransaction({
+					hash: hash,
+                });    
+                tokenStore.activeToken.allowance = await tokenStore.allowance();
 			} catch (error) {
 				console.error(error);
 			} finally {
 				this.loading = false;
 			}
-        },
-        async getGoalInBLD(roundNumber) {
-			return await this.contract.methods.getGoalInBLD(roundNumber).call();
-            
-        }
+		},
+		async getGoalInBLD(roundNumber) {
+			return await this.contract.read.getGoalInBLD([roundNumber]);
+		},
 	},
 });

src/stores/rewardlocker.js

@@ -3,7 +3,10 @@ import RewardLockerJson from "@/assets/contracts/RewardLocker.json";
 import { useTokenStore } from "./tokens";
 import { useMultiCallStore } from "./multicall";
 import { useWalletStore } from "./wallet";
+import { useWalletStoreV2 } from "./walletV2";
 import { ethers } from "ethers";
+import { multicall, getContract } from "@wagmi/core";
+
 
 export const useRewardLockerStore = defineStore("rewardlocker", {
 	state: () => ({
@@ -15,8 +18,13 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 	actions: {
 		async init() {
             console.log("-----------init rewardlocker-------------");
-            const walletStore = useWalletStore();
-            this.contract = new walletStore.web3.eth.Contract(this.config.abi, this.config.contractAddress);
+            const walletStore = useWalletStoreV2();
+            this.contract = getContract({
+				address: this.config.contractAddress,
+				abi: this.config.abi,
+				walletClient: walletStore.walletClient || walletStore.publicClient,
+			});
+            // this.contract = new walletStore.web3.eth.Contract(this.config.abi, this.config.contractAddress);
 		},
 		/*
 		 * @param {*} walletAddress
@@ -25,34 +33,43 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		 * @returns Rewards for specific token and specific round
 		 */
 		async getRewards(walletAddress, roundNumber, tokenAddress) {
-			return await this.contract.methods.rewards(walletAddress, roundNumber, tokenAddress).call();
+			return await this.contract.read.rewards([walletAddress, roundNumber, tokenAddress]);
 		},
 		async getRewardsForAllToken(roundNumber) {
 			console.log("getRewardsForAllToken");
 			const tokenStore = useTokenStore();
-			const walletStore = useWalletStore();
-			const calls = [];
+			const walletStore = useWalletStoreV2();
+			const contracts = [];
 			for (let index = 0; index < tokenStore.token.length; index++) {
                 const token = tokenStore.token[index];
-				calls.push(this.contract.methods.rewards(walletStore.address, roundNumber, token.contractAddress));
-			}
-			const multicallStore = useMultiCallStore();
-			return await multicallStore.aggregate(calls);
+				// calls.push(this.contract.methods.rewards(walletStore.address, roundNumber, token.contractAddress));
+				contracts.push({
+					...this.contract,
+					functionName: "rewards",
+					args: [walletStore.address, roundNumber, token.contractAddress],
+				});
+            }
+            const data = await multicall({
+                contracts,
+            });
+			// const multicallStore = useMultiCallStore();
+			return data
 		},
 		async getSacrificedTokenCoefficient(roundNumber, sacrificedToken) {
-			return await this.contract.methods.getSacrificedTokenCoefficient(roundNumber, sacrificedToken).call();
+			return await this.contract.read.getSacrificedTokenCoefficient([roundNumber, sacrificedToken]);
 		},
 		async lastCompletedRound() {
-			return await this.contract.methods.lastCompletedRound().call();
+			return await this.contract.read.lastCompletedRound();
 		},
         async claim(round) {
-			const walletStore = useWalletStore();
+			const walletStore = useWalletStoreV2();
 			// return await this.contract.methods.claim(round).call();
             console.log(this.contract.methods.claim(round));
-            return await this.contract.methods.claim(round).send({from: walletStore.address, to: this.contractAddress});
+            // return await this.contract.methods.claim(round).send({from: walletStore.address, to: this.contractAddress});
+            return await this.contract.write.claim([round]);
 		},
 		async getTotalRewardsOf(address, rounds) {
-			return await this.contract.methods.getTotalRewardsOf(address, rounds).call();
+			return await this.contract.read.getTotalRewardsOf([address, rounds]);
 		},
 	},
 });

src/stores/rounds.js

@@ -3,6 +3,8 @@ import { useMemeburnerStore } from "./memeburner";
 import { useTokenStore } from "./tokens";
 import { useRewardLockerStore } from "./rewardlocker";
 import { useWalletStore } from "./wallet";
+import { useWalletStoreV2 } from "./walletV2";
+import { multicall } from "@wagmi/core";
 
 
 export const useRoundsStore = defineStore("rounds", {
@@ -21,44 +23,75 @@ export const useRoundsStore = defineStore("rounds", {
         async init() {
             //fill initial round
         },
-        async updateCurrentRound(sacrificedToken, sacrificedAmount) {
+        async loadRewardsRounds() {
+            const walletStore = useWalletStoreV2();
+            const rewardLockerStore = useRewardLockerStore();
+
+            console.log("this.currentRound", this.currentRound);
+            const contracts = []
+            for (let index = 0; index < this.currentRound; index++) {
+                console.log("load round: " + index);
+                // await this.fillRound(index)
+
+                contracts.push({
+					...rewardLockerStore.contract,
+					functionName: "getTotalRewardsOf",
+					args: [walletStore.address, [index +1]],
+				});
+            }
+
+            const data = await multicall({
+				contracts,
+            });
+            console.log("data123abc", data);
+            // var test = await rewardLockerStore.getTotalRewardsOf(walletStore.address, rounds)
+            for (let index = 0; index < data.length; index++) {
+                const element = data[index];
+                if (!this.rounds[index]) {
+                    this.rounds[index] = {};
+                }
+                this.rounds[index].round = index + 1
+                this.rounds[index].rewards_total = element.result
+            }
+        },
+        async updateCurrentRound(sacrificedToken) {
             const tokenStore = useTokenStore();
             const memeBurnerStore = useMemeburnerStore();
-            var data = await memeBurnerStore.getSacrificedRound(this.currentRound)
+            var data = await memeBurnerStore.getSacrificedRound(this.currentRound);
             console.log("data123", data);
             var tokenIndex = this.rounds[this.currentRound].token.findIndex((tokenData) => tokenData.contractAddress === sacrificedToken);
-            this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex][1];
+            this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex].result[1];
 
         },
-        async fillRound() {
+        async fillRound(roundNumber) {
             console.log("fillRound");
             const memeBurnerStore = useMemeburnerStore();
             const tokenStore = useTokenStore();
-            const walletStore = useWalletStore();
+            const walletStore = useWalletStoreV2();
             const rewardLockerStore = useRewardLockerStore();
 
             // if (this.activeRound === this.currentRound) {
             //     console.log("activeRound is not completed");
             // } else
-                if (!this.rounds[this.activeRound]) {
-                    console.log("round not filled --> fill round");
-                    console.log("vor error");
-                    var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
-                    let rewardData = null;
-                    if (await walletStore.isConnected()) {
-						rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
-                    } 
-                    console.log("rewardData123", rewardData);
-                    
-                    var goal = await memeBurnerStore.getGoal(this.activeRound);
+            if (!this.rounds[roundNumber]?.goal) {
+                console.log("round not filled --> fill round");
+                console.log("vor error");
+                var data = await memeBurnerStore.getSacrificedRound(roundNumber)
+                let rewardData = null;
+                if (walletStore.connected) {
+                    rewardData = await rewardLockerStore.getRewardsForAllToken(roundNumber);
+                } 
+                console.log("rewardData123", rewardData);
                 
+                var goal = await memeBurnerStore.getGoal(roundNumber);
+                console.log("goal", goal);
                 var tokenArray = []
-                var rewards_clan = BigInt(0);
-                var rewards_sacrifice = BigInt(0);
+                var rewards_clan = 0
+                var rewards_sacrifice = 0
                 for (let index = 0; index < data.length; index++) {
                     var tokenData = {};
                     const token = tokenStore.token[index];
-                    var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(this.activeRound, token.contractAddress);
+                    var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(roundNumber, token.contractAddress);
                     
                     
 
@@ -66,31 +99,33 @@ export const useRoundsStore = defineStore("rounds", {
                     tokenData.contractAddress = token.contractAddress;
                     tokenData.vamplogo = token.vamp.logo;
                     tokenData.vampname = token.vamp.name;
-                    tokenData.amount = data[index][1];
+                    tokenData.amount = data[index].result[1];
                     tokenData.getAmountToReachGoal= await memeBurnerStore.getAmountToReachGoal(token.contractAddress);
-                    if (this.currentRound !== this.activeRound && await walletStore.isConnected()) {
-						const clanwin = BigInt((testcoef / 10000 - 1) * rewardData[index]);
-						const sacrificeRewards = BigInt(rewardData[index]) - clanwin;
-						tokenData.rewards_ges = rewardData[index];
-						tokenData.rewards_clan = clanwin;
-						tokenData.rewards_sacrifice = sacrificeRewards;
-						rewards_clan = rewards_clan + BigInt(clanwin / BigInt(Math.pow(10, token.decimals)));
-						rewards_sacrifice =
-							rewards_sacrifice + BigInt(sacrificeRewards / BigInt(Math.pow(10, token.decimals)));
-					}
-                    tokenArray.push(tokenData);
-                    }
+                    if (this.currentRound !== roundNumber && walletStore.connected) {
+                        const clanwin = (Number(testcoef) / 10000 - 1) * Number(rewardData[index].result);
+                        const sacrificeRewards = Number(rewardData[index].result) - clanwin;
 
-                const goalInBLD = await memeBurnerStore.getGoalInBLD(this.activeRound);
-                this.rounds[this.activeRound] = {
-                    goal: goal.goal,
-                    goalInBLD: goalInBLD /Math.pow(10, tokenStore.memeToken.decimals),
-					expirationTimestamp: goal.expirationTimestamp,
-					rewards_clan: rewards_clan,
-                    rewards_sacrifice: rewards_sacrifice,
-                    rewards_total: rewards_clan + rewards_sacrifice,
-					token: tokenArray,
-				};
+                        tokenData.rewards_ges = BigInt(rewardData[index].result);
+                        tokenData.rewards_clan = BigInt(clanwin);
+                        tokenData.rewards_sacrifice = BigInt(sacrificeRewards);
+
+                        rewards_clan = rewards_clan + (clanwin / Math.pow(10, token.decimals));
+                        rewards_sacrifice =
+                            rewards_sacrifice + sacrificeRewards / Math.pow(10, token.decimals);
+                    }
+                    tokenArray.push(tokenData);
+                }
+                const goalInBLD = await memeBurnerStore.getGoalInBLD(roundNumber);
+                this.rounds[roundNumber] = {
+                    goal: goal[0],
+                    goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
+                    expirationTimestamp: goal[1],
+                    rewards_clan: BigInt(rewards_clan),
+                    rewards_sacrifice: BigInt(rewards_sacrifice),
+                    rewards_total: BigInt(rewards_clan + rewards_sacrifice),
+                    token: tokenArray,
+                };
+                console.log("this.rounds[roundNumber]", this.rounds[roundNumber]);
             } else {
                 console.log("round already filled");
             }

src/stores/tokens.js

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { markRaw } from "vue";
 import Web3 from "web3";
 import { useWalletStore } from "./wallet";
+import { useWalletStoreV2 } from "./walletV2";
 import { useContractStore } from "./contracts";
 import { ethers } from "ethers";
 import { useMemeburnerStore } from "./memeburner";
@@ -9,6 +10,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, getContract, fetchToken } from "@wagmi/core";
+
 
 export const useTokenStore = defineStore("token", {
 	state: () => ({
@@ -66,43 +69,74 @@ export const useTokenStore = defineStore("token", {
 	}),
 	getters: {},
 	actions: {
-		async init() {
-			console.log("-----------init token-------------");
-			const walletStore = useWalletStore();
+		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 = new walletStore.web3.eth.Contract(token.abi, token.contractAddress);
-				token.decimals = parseInt(await token.contract.methods.decimals().call());
+                token.contract = getContract({
+					address: token.contractAddress,
+					abi: token.abi,
+					WalletClient: walletStore.walletClient || walletStore.publicClient,
+				});
+                contracts.push({...token.contract, functionName: "decimals"})
+                
             }
 
+            
             //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());
+            this.memeToken.contract = getContract({
+				address: this.memeToken.config.contractAddress,
+				abi: this.memeToken.config.abi,
+				PublicClient: walletStore.publicClient,
+				WalletClient: walletStore.walletClient,
+			});
+                contracts.push({ ...this.memeToken.contract, functionName: "decimals" });
+
+
+             const data = await multicall({
+					contracts,
+             });
+            //multicall decimal
+            for (let index = 0; index < this.token.length; index++) {
+                const token = this.token[index];
+                token.decimals = data[index].result
+            }
+
+            this.memeToken.decimals = data[this.token.length].result;
+            
 		},
-		async changeActiveToken(token) {
+        async changeActiveToken(token) {
+            console.log("changeActiveToken");
 			this.activeToken = token;
-			const web3 = new Web3(window.ethereum);
-			this.contract = new web3.eth.Contract(token.abi, token.contractAddress);
-			const walletStore = useWalletStore();
-			if (walletStore.connected) {
+			// const web3 = new Web3(window.ethereum);
+			// this.contract = new web3.eth.Contract(token.abi, token.contractAddress);
+            const walletStore = useWalletStoreV2();
+            if (walletStore.connected) {
+                //TODO, wenn connected, dann all diese Daten laden?
 				this.activeToken.balance = await walletStore.getTokenBalance(token);
 				this.activeToken.allowance = await this.allowance();
 			}
 		},
 		async allowance() {
 			console.log("allowance");
-			const walletStore = useWalletStore();
+			const walletStore = useWalletStoreV2();
 			const memeBurnerStore = useMemeburnerStore();
-			var allowance = await this.contract.methods
-				.allowance(walletStore.address, memeBurnerStore.config.contractAddress)
-				.call();
-			var decimals = await this.contract.methods.decimals().call();
-			console.log("decimals", decimals);
-			console.log("Math.pow(10, decimals)", Math.pow(10, decimals));
-			allowance = BigInt(allowance / Math.pow(10, decimals));
+			// var allowance = await this.contract.methods
+			// 	.allowance(walletStore.address, memeBurnerStore.config.contractAddress)
+			// 	.call();
+            console.log("this.activeToken.contract", this.activeToken.contract);
+            var allowance = await this.activeToken.contract.read.allowance([
+				walletStore.address,
+				memeBurnerStore.config.contractAddress,
+			]);
+			// var decimals = await this.contract.methods.decimals().call();
+			// console.log("decimals", decimals);
+            const decimals = this.activeToken.decimals;
+
+            allowance = BigInt(allowance / BigInt(Math.pow(10, decimals)));
+            console.log("allowance", allowance);
 			return allowance;
 		},
 		async approveToken(amount) {
@@ -131,6 +165,9 @@ export const useTokenStore = defineStore("token", {
 			const web3 = new Web3(window.ethereum);
 			const contract = new web3.eth.Contract(activeToken.abi, contractAddress);
 			return contract;
-		},
+        },
+        async nonces(userAddress) {
+            return this.memeToken.contract.methods.nonces(userAddress).call();
+        }
 	},
 });

src/stores/wallet.js

@@ -46,10 +46,11 @@ export const useWalletStore = defineStore("wallet", {
 			this.web3socket = new Web3(
 				new Web3.providers.WebsocketProvider(`wss://eth-goerli.g.alchemy.com/v2/${goerliKey}`)
 			);
-		},
+        },
+        // connectWalletV2(connector) {
+        //     this.address = data[0];
+        // },
 		connectWallet() {
-            const tokenStore = useTokenStore();
-			// if (window.ethereum) {
 			window.ethereum
 				.request({ method: "eth_requestAccounts" })
 				.then((data) => {

src/stores/walletV2.js

@@ -0,0 +1,179 @@
+import { defineStore } from "pinia";
+import { markRaw } from "vue";
+import { useTokenStore } from "./tokens";
+
+import {
+	createConfig,
+	configureChains,
+	mainnet,
+	getAccount,
+	getContract,
+	connect,
+	disconnect,
+	InjectedConnector,
+	watchAccount,
+} from "@wagmi/core";
+
+import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
+import { MetaMaskConnector } from "@wagmi/core/connectors/metaMask";
+import { CoinbaseWalletConnector } from "@wagmi/core/connectors/coinbaseWallet";
+
+import { goerli } from "@wagmi/core/chains";
+import { publicProvider } from "@wagmi/core/providers/public";
+import { alchemyProvider } from "@wagmi/core/providers/alchemy";
+
+
+export const useWalletStoreV2 = defineStore("walletV2", {
+	state: () => ({
+		count: 0,
+		alchemy: null,
+		connected: false,
+		address: null,
+		web3: null,
+        provider: null,
+        client: null,
+        publicClient: null,
+        walletClient: null,
+        config: null,
+        chain: null,
+	}),
+	getters: {},
+    actions: {
+        async init() {
+            
+            console.log("wallet init");
+            const goerliKey = import.meta.env.VITE_GOERLI_KEY;
+            const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
+            
+			const { chains, publicClient, webSocketPublicClient } = configureChains(
+				[goerli],
+				[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
+            );
+
+            
+			this.config = createConfig({
+				autoConnect: true,
+				connectors: [
+					new CoinbaseWalletConnector({
+						chains,
+						options: {
+							appName: "wagmi demo",
+						},
+					}),
+					new MetaMaskConnector({ chains }),
+					new WalletConnectConnector({
+						chains,
+						options: {
+							projectId: projectId,
+							showQrModal: true,
+							metadata: {
+								name: "Bloodline-App",
+								description: "TODO Bloodline Description",
+								url: "https://gitea.loseyourip.com/",
+								icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
+							},
+						},
+					}),
+				],
+				publicClient,
+				webSocketPublicClient,
+            });
+            this.publicClient = publicClient;
+
+            console.log("hier123");
+             const account = getAccount();
+
+				console.log("account123abc", account);
+				if (account.address) {
+					this.address = account.address;
+					this.connected = true;
+				}
+			// await this.isConnected();
+			// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
+			// if (this.connected) {
+			// 	const web3 = new Web3(window.ethereum);
+			// 	this.web3 = markRaw(web3);
+			// 	console.log("hierabc");
+			// 	window.ethereum.on("accountsChanged", async (data) => {
+			// 		console.log("accountsChanged", data);
+			// 		console.log("data", data);
+			// 		if (data.length > 0) {
+			// 			this.address = data[0];
+			// 			this.connected = true;
+			// 		} else {
+			// 			this.address = null;
+			// 			this.connected = false;
+			// 		}
+			// 	});
+
+			// 	// provider = new ethers.BrowserProvider(window.ethereum);
+			// } else {
+			// 	const url = `https://eth-goerli.g.alchemy.com/v2/${goerliKey}`;
+			// 	this.web3 = new Web3(url);
+			// 	// provider = new ethers.AlchemyProvider("goerli", goerliKey);
+			// }
+
+			// //Websocket
+			// this.web3socket = new Web3(
+			// 	new Web3.providers.WebsocketProvider(`wss://eth-goerli.g.alchemy.com/v2/${goerliKey}`)
+			// );
+		},
+		// connectWalletV2(connector) {
+		//     this.address = data[0];
+		// },
+       async connectWallet(connector) {
+            console.log("connector.name", connector.name);
+            // if (!account.isConnected) {
+            const connection = await connect({
+				chainId: goerli.id,
+				connector: connector,
+            });
+            // this.address = connection.account;
+		},
+		async getTokenBalance(token) {
+			// const tokenStore = useTokenStore();
+			// const contract = tokenStore.getTokenContract(token);
+			// const result = await contract.methods.balanceOf(this.address).call();
+            console.log("this.address", this.address);
+            const result = await token.contract.read.balanceOf([this.address]);
+			return result;
+		},
+		// async isConnected() {
+		// 	try {
+		// 		this.loading = true;
+		// 		if (!window.ethereum) {
+		// 			console.warn("Metamask not installed"), (this.connected = false);
+		// 			return;
+		// 		}
+		// 		const accounts = await window.ethereum.request({ method: "eth_accounts" });
+		// 		if (accounts.length) {
+		// 			this.connected = true;
+		// 			this.address = accounts[0];
+		// 			console.log(`You're connected to: ${accounts[0]}`);
+		// 			// const web3 = new Web3(window.ethereum);
+		// 			// const tokenStore = useTokenStore();
+		// 			// console.log("tokenStore.activeToken", tokenStore.activeToken);
+		// 			// if (tokenStore.activeToken.contractAddress) {
+		// 			// 	tokenStore.activeToken.balance = await this.getTokenBalance(
+		// 			// 		tokenStore.activeToken
+		// 			// 	);
+		// 			// 	tokenStore.activeToken.allowance = await tokenStore.allowance();
+		// 			// }
+		// 			// tokenStore.memeBurner.contract = new web3.eth.Contract(
+		// 			// 	tokenStore.memeBurner.config.abi,
+		// 			// 	tokenStore.memeBurner.config.contractAddress
+		// 			// );
+		// 		} else {
+		// 			console.log("Metamask is not connected");
+		// 			this.connected = false;
+		// 		}
+		// 	} catch (error) {
+		// 		console.log("error", error);
+		// 	} finally {
+		// 		this.loading = false;
+		// 		return this.connected;
+		// 	}
+		// },
+	},
+	persist: true,
+});

src/views/CycleView.vue

@@ -0,0 +1,21 @@
+<template>
+	<div class="cycle-page">
+		<div class="bloodline-page-headline">Cycle</div>
+		<div class="bloodline-page-description container">
+			Claim and trade your $BDL at each cycle's end. Become the most powerful meme clan each cycle and win extra
+			rewards.
+		</div>
+	</div>
+</template>
+
+<script setup></script>
+
+<style lang="sass">
+.bloodline-page-headline
+    text-align: center
+    font-size: 32px
+    margin-bottom: 32px
+.bloodline-page-description
+    text-align: center
+    font-size: 16px
+</style>

src/views/HomeView.vue

@@ -19,6 +19,7 @@ const days = ref(null);
 const hours = ref(null);
 const minutes = ref(null);
 const seconds = ref(null);
+const openTutorial = ref(false);
 const timer = ref(null);
 const modules = [Navigation];
 const isMobile = inject("isMobile");
@@ -26,14 +27,14 @@ const isMobile = inject("isMobile");
 async function prevSlide() {
 	if (activeRound.value > 1) {
 		activeRound.value--;
-		await roundsStore.fillRound();
+		await roundsStore.fillRound(activeRound.value);
 	}
 }
 
 async function nextSlide() {
 	if (activeRound.value < currentRound.value) {
 		activeRound.value++;
-		await roundsStore.fillRound();
+		await roundsStore.fillRound(activeRound.value);
 	}
 }
 
@@ -49,9 +50,7 @@ onBeforeUnmount(() => {
 });
 
 function timeBetweenDates() {
-	const dateEntered = new Date(
-		getCurrentRoundData.value?.expirationTimestamp * 1000
-	);
+	const dateEntered = new Date(Number(getCurrentRoundData.value?.expirationTimestamp) * 1000);
 
 	if (dateEntered) {
 		var now = new Date();
@@ -153,7 +152,8 @@ function timeBetweenDates() {
 										<tr>
 											<td>Sacrifice:</td>
 											<td class="divider"></td>
-											<td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td>
+											<!-- <td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td> -->
+											<td>{{ getCurrentRoundData?.goalInBLD }} $BDL</td>
 										</tr>
 										<tr>
 											<td>Time left:</td>
@@ -171,18 +171,31 @@ function timeBetweenDates() {
 				</div>
 			</section>
 			<div class="container section-header-container">
-				<h2>Tutorial</h2>
-				When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
-				<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
-			</div>
-			<section id="tokenomics" class="container">
-				<div class="card">
-					<h2>Tokenomics</h2>
-					<p>100% clan owned. No team %, no pre-mine</p>
-					<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
-					<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
+				<div class="tutorial-header">
+					<div class="tutorial-headline">Tutorial</div>
+					<div class="tutorial-more" @click="openTutorial = !openTutorial">
+						<font-awesome-icon v-if="openTutorial" icon="chevron-up" />
+						<font-awesome-icon v-else icon="chevron-down" />
+					</div>
 				</div>
-			</section>
+				<div v-if="openTutorial" class="tutorial-text">
+					When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
+					<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
+					<section id="tokenomics" class="container">
+						<div class="card">
+							<h2>Tokenomics</h2>
+							<p>100% clan owned. No team %, no pre-mine</p>
+							<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
+							<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
+						</div>
+					</section>
+					<div>
+						$BLOOD is 100%<br />
+						community owned.<br />
+						No team %, no pre-mine.
+					</div>
+				</div>
+			</div>
 		</div>
 	</main>
 </template>
@@ -285,6 +298,15 @@ function timeBetweenDates() {
     margin-bottom: 64px
     @media (min-width: 992px)
         width: 655px
+    .tutorial-header
+        display: flex
+        justify-content: center
+        gap: 16px
+        font-size: 24px
+        margin-bottom: 40px
+    .tutorial-text
+        font-size: 18px
+
 
 .bloodline-wrapper
     .bloodline-inner

src/views/ProfileView.vue

@@ -0,0 +1,364 @@
+<template>
+	<div>
+		<div class="profile-header">Profile</div>
+		<div class="profile-subheader">
+			<div class="profile-subheader-logo"><img src="/assets/img/Icon.png" alt="" /></div>
+			<div class="profile-subheader-address">0x12345...812d</div>
+		</div>
+		<div class="total-rewards-wrapper">
+			<div class="total-rewards-headline">Total Rewards</div>
+			<div class="total-rewards-inner">
+				<div class="claim-wrapper">
+					<div class="claim-inner">
+						<div class="claim-header">Claimed</div>
+						<div class="claim-body">TODO</div>
+					</div>
+				</div>
+				<div class="claim-hr"></div>
+				<div class="claim-wrapper">
+					<div class="claim-inner">
+						<div class="claim-header">Unclaimed</div>
+						<div class="claim-body">TODO</div>
+					</div>
+				</div>
+				<div class="total-rewards-buttons">
+					<div class="btn btn-immortal">Stake</div>
+					<div class="btn btn-immortal">Unstake</div>
+				</div>
+			</div>
+		</div>
+		<div class="most-sacrificed-wrapper">
+			<div class="most-sacrificed-inner">
+				<div class="most-sacrificed-left">
+					<div class="most-sacrificed-header">Bloodline Clan</div>
+					<div class="most-sacrificed-subheader">Most sacrificed</div>
+				</div>
+				<div class="most-sacrificed-right">
+					<div class="most-sacrificed-coin-logo">
+						<img src="/assets/img/token/pepevamp.png" alt="" />
+					</div>
+					<div class="most-sacrificed-coin-name">$PEPE</div>
+				</div>
+			</div>
+		</div>
+		<div class="total-sacrificed-wrapper">
+			<div class="total-sacrificed-inner">
+				<div class="total-sacrificed-header">Total Sacrifice</div>
+				<div class="total-sacrificed-coins">
+					<div class="total-sacrificed-coin">
+						<div class="total-sacrificed-coin-amount">1,2b</div>
+						<div class="total-sacrificed-coin-logo">
+							<img src="/assets/img/token/pepevamp.png" alt="" />
+						</div>
+						<div class="total-sacrificed-coin-name">$PEPE</div>
+					</div>
+					<div class="total-sacrificed-coin">
+						<div class="total-sacrificed-coin-amount">139m</div>
+						<div class="total-sacrificed-coin-logo">
+							<img src="/assets/img/token/shibvamp.png" alt="" />
+						</div>
+						<div class="total-sacrificed-coin-name">$SHIB</div>
+					</div>
+					<div class="total-sacrificed-coin">
+						<div class="total-sacrificed-coin-amount">0</div>
+						<div class="total-sacrificed-coin-logo">
+							<img src="/assets/img/token/elonvamp.png" alt="" />
+						</div>
+						<div class="total-sacrificed-coin-name">$ELON</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="cycle-wrapper">
+			<div class="cycle-inner">
+				<div class="cycle-headline">Cycles</div>
+				<div class="cycle-header">
+					<div class="cycle-header-left">Cycle</div>
+					<div class="cycle-header-right">Reward</div>
+				</div>
+				<div class="cycle-rounds">
+					<div class="cycle-round" v-for="(round, index) in rounds" :key="index">
+						<template v-if="round">
+							<div class="cycle-round-inner">
+								<div class="cycle-round-number">{{ round.round }}</div>
+								<div class="cycle-round-badget" v-if="roundsStore.currentRound === round.round">
+									active
+								</div>
+								<div class="cycle-round-reward">
+									{{ Number(round.rewards_total / BigInt(Math.pow(10, 18))) }} $BDL
+								</div>
+								<div class="cycle-round-more" @click="openRound(index)">
+									<font-awesome-icon
+										v-if="openCycleElement && index === activeRound"
+										icon="chevron-up"
+									/>
+									<font-awesome-icon v-else icon="chevron-down" />
+								</div>
+							</div>
+							<div class="cycle-round-detail" v-if="openCycleElement && index === activeRound">
+								<div class="cycle-round-detail-inner">
+									<div class="sacrifice-reward-wrapper">
+										<div class="sacrifice-reward-inner">
+											<div class="sacrifice-reward-header">
+												<div class="sacrifice-reward-header-name">Sacrifice Reward</div>
+												<div class="sacrifice-reward-header-amount">+2,000 $BDL</div>
+											</div>
+											<table class="sacrifice-coins">
+												<tr class="sacrifice-coin">
+													<td>2b PEPE</td>
+													<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
+													<td>1,500 $BDL</td>
+												</tr>
+												<tr class="sacrifice-coin">
+													<td>10m SHIB</td>
+													<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
+													<td class="bloodline">500 $BDL</td>
+												</tr>
+											</table>
+										</div>
+									</div>
+									<div class="sacrifice-reward-wrapper">
+										<div class="sacrifice-reward-inner">
+											<div class="sacrifice-reward-header">
+												<div class="sacrifice-reward-header-name">Staking Bonus</div>
+												<div class="sacrifice-reward-header-amount">+1,000 $BDL</div>
+											</div>
+											<table class="sacrifice-coins">
+												<tr class="sacrifice-coin">
+													<td>Staked</td>
+													<td class="arrow"></td>
+													<td class="bloodline">1,000 $BDL</td>
+												</tr>
+											</table>
+										</div>
+									</div>
+									<div class="sacrifice-reward-wrapper">
+										<div class="sacrifice-reward-inner">
+											<div class="sacrifice-reward-header">
+												<div class="sacrifice-reward-header-name">Competition Bonus</div>
+												<div class="sacrifice-reward-header-amount">+200 $BDL</div>
+											</div>
+											<table class="sacrifice-coins">
+												<div class="sacrifice-coin">
+													<div><img src="/assets/img/winner.png" alt="" /></div>
+													<div><img src="/assets/img/token/pepevamp.png" alt="" /></div>
+													<div>$PEPE</div>
+													<div class="arrow"></div>
+													<div class="bloodline">1,000 $BDL</div>
+												</div>
+											</table>
+										</div>
+									</div>
+								</div>
+							</div>
+						</template>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import { useRoundsStore } from "@/stores/rounds";
+
+const roundsStore = useRoundsStore();
+
+const activeRound = ref(null);
+const openCycleElement = ref(false);
+function openRound(index) {
+	if (activeRound.value === index && openCycleElement.value) {
+		openCycleElement.value = false;
+	} else {
+		openCycleElement.value = true;
+	}
+	activeRound.value = index;
+}
+
+onMounted(async () => {
+	console.log("loadRounds");
+	await roundsStore.loadRewardsRounds();
+	console.log("roundsStore.rounds", roundsStore.rounds);
+});
+
+const rounds = computed(() => roundsStore.rounds.reverse());
+</script>
+
+<style lang="sass">
+.profile-header
+    color: #FFF
+    text-align: center
+    font-size: 32px
+    margin-bottom: 12px
+.profile-subheader
+    display: flex
+    justify-content: center
+    gap: 12px
+    align-items: center
+    // .profile-subheader-logo
+    margin-bottom: 24px
+    .profile-subheader-address
+        font-size: 12px
+.total-rewards-wrapper
+    border-radius: 16px
+    background: #202020
+    padding: 8px
+    .total-rewards-headline
+        color: #FFF
+        text-align: center
+        font-size: 24px
+        margin-bottom: 24px
+    .total-rewards-inner
+        border-radius: 16px
+        border: 2px solid var(--grey, #858585)
+        background: var(--dark-grey, #202020)
+        padding: 8px 12px
+        .claim-wrapper
+            .claim-inner
+                flex-direction: column
+                margin-bottom: 16px
+                .claim-header
+                    color: var(--white, #F9F9FA)
+                    font-size: 18px
+                    text-align: center
+                    margin-bottom: 16px
+        .claim-hr
+            background-color: #858585
+            margin: 16px 0
+            height: 1px
+    .total-rewards-buttons
+        display: flex
+        text-align: center
+        gap: 16px
+        justify-content: space-between
+        div
+            flex: 1 1 auto
+            font-size: 18px
+
+
+
+.most-sacrificed-wrapper
+    .most-sacrificed-inner
+        padding: 8px
+        border-radius: 16px
+        border: 1px solid var(--grey, #858585)
+        background: var(--dark-grey, #202020)
+        gap: 34px
+        display: flex
+        justify-content: center
+        .most-sacrificed-left
+            display: flex
+            flex-direction: column
+            justify-content: center
+            .most-sacrificed-header
+                font-size: 24px
+            .most-sacrificed-subheader
+                font-size: 12px
+        .most-sacrificed-right
+            display: flex
+            flex-direction: column
+            .most-sacrificed-coin-logo
+                img
+                    width: 49px
+                    height: 49px
+                    border-radius: 50%
+
+
+
+.total-sacrificed-wrapper
+    background-color: var(--dark-grey, #202020)
+    border-radius: 16px
+    border: 1px solid var(--grey, #858585)
+    padding: 8px
+    .total-sacrificed-inner
+        display: flex
+        flex-direction: column
+        align-items: center
+        gap: 16px
+        .total-sacrificed-header
+            font-size: 18px
+        .total-sacrificed-coins
+            display: flex
+            gap: 27px
+            .total-sacrificed-coin
+                display: flex
+                flex-direction: column
+                gap: 8px
+                text-align: center
+                .total-sacrificed-coin-logo
+                    img
+                        height: 49px
+                        width: 49px
+                        border-radius: 50%
+
+
+
+.cycle-wrapper
+    margin-top: 24px
+    .cycle-inner
+        .cycle-headline
+            font-size: 24px
+            margin-bottom: 8px
+            text-align: center
+        .cycle-header
+            display: flex
+            justify-content: space-between
+            padding: 8px 16px
+            font-size: 18px
+        .cycle-rounds
+            gap: 8px
+            display: flex
+            flex-direction: column
+            .cycle-round
+                border-radius: 16px
+                border: 3px solid var(--grey, #858585)
+                background: var(--dark-grey, #202020)
+                padding: 12px
+                min-height: 55px
+                .cycle-round-inner
+                    display: flex
+                    font-size: 18px
+                    gap: 8px
+                    align-items: center
+                    // .cycle-round-number
+                    .cycle-round-badget
+                        border-radius: 14px
+                        border: 1px solid var(--grey, #858585)
+                        padding: 8px 16px
+                        height: 25px
+                        color: var(--grey, #858585)
+                        text-align: center
+                        font-size: 14px
+                        display: flex
+                        align-items: center
+                        margin-left: auto
+                    .cycle-round-reward
+                        margin-left: auto
+                    .cycle-round-more
+                        font-size: 16px
+            .cycle-round-detail
+                .cycle-round-detail-inner
+                    .sacrifice-reward-wrapper
+                        border-radius: 16px
+                        border: 0.5px solid var(--grey, #858585)
+                        margin-top: 12px
+                        .sacrifice-reward-inner
+                            padding: 8px 16px
+                            .sacrifice-reward-header
+                                display: flex
+                                font-size: 18px
+                                justify-content: space-between
+                                margin-bottom: 16px
+                            .sacrifice-coins
+                                margin-left: auto
+                                border-collapse: separate
+                                border-spacing: 0 12px
+                                .sacrifice-coin
+                                    td
+                                        text-align: right
+                                    .arrow
+                                        width: 14px
+                                        padding: 0 16px
+</style>

src/views/TestView.vue

@@ -5,6 +5,8 @@
 		<button @click="sacrificeMeme">sacrifice Meme</button>
 		<button @click="approveMeme1">approve Meme1</button>
 		<button @click="tokenStore.approveToken(MemeBurnerJson, 10)">wallet approve</button>
+		<button @click="stake">stake</button>
+		<button @click="">unstake</button>
 	</div>
 </template>
 
@@ -34,6 +36,8 @@ const web3 = ref(null);
 const contractMeme2 = ref(null);
 const contractMeme1 = ref(null);
 const contractBurner = ref(null);
+const contractBloodline = ref(null);
+const rewardlocker = ref(null);
 
 onMounted(async () => {
 	web3.value = new Web3(window.ethereum);
@@ -43,9 +47,27 @@ onMounted(async () => {
 	console.log("accounts", accounts);
 	web3.value.eth.Contract.defaultAccount = accounts[0];
 
-	contractMeme1.value = new web3.value.eth.Contract(Meme1Json.abi, Meme1Json.contractAddress);
-	contractMeme2.value = new web3.value.eth.Contract(Meme2Json.abi, Meme2Json.contractAddress);
-	contractBurner.value = new web3.value.eth.Contract(MemeBurnerJson.abi, MemeBurnerJson.contractAddress);
+	contractMeme1.value = new web3.value.eth.Contract(
+		Meme1Json.abi,
+		Meme1Json.contractAddress
+	);
+	contractMeme2.value = new web3.value.eth.Contract(
+		Meme2Json.abi,
+		Meme2Json.contractAddress
+	);
+	contractBloodline.value = new web3.value.eth.Contract(
+		MemeTokenJson.abi,
+		MemeTokenJson.contractAddress
+	);
+	contractBurner.value = new web3.value.eth.Contract(
+		MemeBurnerJson.abi,
+		MemeBurnerJson.contractAddress
+	);
+
+	rewardlocker.value = new web3.value.eth.Contract(
+		RewardLockerJson.abi,
+		RewardLockerJson.contractAddress
+	);
 });
 
 async function approveMeme1() {
@@ -93,16 +115,168 @@ async function mintToken2() {
 }
 
 
-// 0.1 Meme will be sacrificed
+// 100 Meme will be sacrificed
 async function sacrificeMeme() {
 	const allowance = await contractMeme1.value.methods
-		.allowance(web3.value.eth.Contract.defaultAccount, MemeBurnerJson.contractAddress)
+		.allowance(
+			web3.value.eth.Contract.defaultAccount,
+			MemeBurnerJson.contractAddress
+		)
 		.call();
 	console.log("allowance", allowance);
 	var reward = await contractBurner.value.methods
-		.sacrificeMeme(Meme1Json.contractAddress, "100000000000000000")
+		.sacrificeMeme(Meme1Json.contractAddress, "100000000000000000000")
 		.send({ from: web3.value.eth.Contract.defaultAccount });
 	console.log("reward", reward);
 }
+
+async function stake() {
+	const SECOND = 1000;
+
+	const fromAddress = "0x66422602B2f4885c57EE794174f98d9E4DDBBBC6";
+	// JavaScript dates have millisecond resolution
+	const deadline = Date.now() + 20 * 60;
+
+	const spender = "0x7C3D5a19878d550D0c6c2b0BFC884ef410F6e440";
+	console.log("deadline", deadline);
+	var nonceTest = await contractBloodline.value.methods
+		.nonces(fromAddress)
+		.call();
+	console.log("type", typeof nonceTest);
+	console.log("nonceTest", nonceTest);
+	const value = (1 * Math.pow(10, 18)).toString();
+	console.log("value", value);
+	const messageData = createPermitMessageData(
+		fromAddress,
+		spender,
+		nonceTest,
+		deadline,
+		value
+	);
+	console.log("messageData", messageData);
+	// const sig = await signData(fromAddress, messageData.typedData);
+	const signature = await signTyped(fromAddress, messageData.typedData);
+	// console.log("sig", sig);
+	console.log("signature", signature);
+
+	const split = splitSig(signature);
+
+	console.log("split", split);
+	var resultStake = await rewardlocker.value.methods
+		.stakeToBeSecured(value, deadline, split.v, split.r, split.s)
+		.send({ from: fromAddress });
+	console.log("resultStake", resultStake);
+
+	var allowance = await contractBloodline.value.methods
+		.allowance(fromAddress, spender)
+		.call();
+	console.log("allowance", allowance);
+	// return Object.assign({}, sig, messageData.message);
+}
+
+const signTyped = (fromAddress, dataToSign) => {
+	// call this method to sign EIP 712 data
+	return new Promise((resolve, reject) => {
+		web3.value.currentProvider.sendAsync(
+			{
+				method: "eth_signTypedData_v4",
+				params: [fromAddress, dataToSign],
+				from: fromAddress,
+			},
+			(err, result) => {
+				if (err) return reject(err);
+				resolve(result.result);
+			}
+		);
+	});
+};
+
+const splitSig = (sig) => {
+	// splits the signature to r, s, and v values.
+	// const pureSig = sig.replace("0x", "");
+
+	const r = sig.slice(0, 66);
+	const s = "0x" + sig.slice(66, 130);
+	const v = Number("0x" + sig.slice(130, 132));
+	return { v, r, s };
+};
+
+const signData = async function (fromAddress, typeData) {
+	const result = await window.ethereum.request({
+		id: 1,
+		method: "eth_signTypedData_v4",
+		params: [fromAddress, typeData],
+		from: fromAddress,
+	});
+
+	const r = result.slice(0, 66);
+	const s = "0x" + result.slice(66, 130);
+	const v = Number("0x" + result.slice(130, 132));
+	return { v, r, s };
+};
+
+const createPermitMessageData = function (
+	fromAddress,
+	spender,
+	nonce,
+	deadline,
+	value
+) {
+	const message = {
+		owner: fromAddress,
+		spender: spender,
+		nonce: nonce,
+		deadline: deadline,
+		value: value,
+	};
+
+	const domainType = [
+		{ name: "name", type: "string" },
+		{ name: "version", type: "string" },
+		{ name: "chainId", type: "uint256" },
+		{ name: "verifyingContract", type: "address" },
+	];
+
+	const typedData = JSON.stringify({
+		types: {
+			EIP712Domain: domainType,
+			Permit: [
+				{
+					name: "owner",
+					type: "address",
+				},
+				{
+					name: "spender",
+					type: "address",
+				},
+				{
+					name: "value",
+					type: "uint256",
+				},
+				{
+					name: "nonce",
+					type: "uint256",
+				},
+				{
+					name: "deadline",
+					type: "uint256",
+				},
+			],
+		},
+		primaryType: "Permit",
+		domain: {
+			name: "Bloodline",
+			version: "1",
+			chainId: 5,
+			verifyingContract: "0x9dcD7Cd83ED0Fe69DDfE3c2A265a1207F2Bc3219",
+		},
+		message: message,
+	});
+
+	return {
+		typedData,
+		message,
+	};
+};
 // console.log("balanceOf", contract.mint(10));
 </script>

src/views/WagmiView.vue

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <div v-if="!fromAddress" @click="showConnectors = true">Connect</div>
+        <div v-if="showConnectors">
+            <div v-for="connector in config.connectors" @click="connectWallet(connector)"> 
+                {{ connector.name}}
+            </div>
+        </div>
+       <div v-if="fromAddress" @click="disconnectWallet">Disconnect</div>
+    </div>
+</template>
+
+<script setup >
+import { ref, toRaw, onMounted, onUnmounted } from "vue";
+import Meme1Json from "@/assets/contracts/Meme1.json";
+import { useWalletStore } from "@/stores/wallet";
+const walletStore = useWalletStore();
+
+const fromAddress = ref(null);
+const showConnectors = ref(false);
+import {
+	createConfig,
+	configureChains,
+	mainnet,
+	getAccount,
+	getContract,
+	connect,
+	disconnect,
+	InjectedConnector,
+	getWalletClient,
+	watchAccount,
+} from "@wagmi/core";
+
+import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
+import { MetaMaskConnector } from "@wagmi/core/connectors/metaMask";
+
+import { goerli } from "@wagmi/core/chains";
+import { publicProvider } from "@wagmi/core/providers/public";
+import { alchemyProvider } from "@wagmi/core/providers/alchemy";
+const goerliKey = import.meta.env.VITE_GOERLI_KEY;
+console.log("goerliKey", goerliKey);
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+	[goerli],
+	[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
+);
+const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
+const config = ref(null);
+const accountSub = ref(null);
+// onMounted(() => {
+// 	const account = getAccount();
+// 	console.log("account", account);
+// 	if (account.isConnected) {
+// 		fromAddress.value = account.address;
+// 	}
+// 	accountSub.value = watchAccount((account) => {
+// 		console.log("account123", account);
+// 		fromAddress.value = account.address;
+// 		walletStore.address = account.address;
+// 	});
+// });
+
+// onUnmounted(() => {
+// 	accountSub.value();
+// 	console.log("unsubscribe");
+// });
+
+config.value = createConfig({
+	autoConnect: true,
+	connectors: [
+		new MetaMaskConnector({ chains }),
+		new WalletConnectConnector({
+			chains,
+			options: {
+				projectId: projectId,
+				showQrModal: true,
+				metadata: {
+					name: "Bloodline-App",
+					description: "TODO Bloodline Description",
+					url: "https://gitea.loseyourip.com/",
+					icons: [
+						"https://gitea.loseyourip.com/assets/img/vampir.png",
+					],
+				},
+			},
+		}),
+	],
+	publicClient,
+	webSocketPublicClient,
+});
+console.log("config", config);
+const walletClient = await getWalletClient();
+console.log("walletClient", walletClient);
+
+async function disconnectWallet() {
+	try {
+		await disconnect();
+	} catch (error) {
+		console.log("error", error);
+	}
+}
+
+async function connectWallet(connector) {
+	console.log("connector.name", connector.name);
+	const rawConnector = toRaw(connector);
+	// if (!account.isConnected) {
+	const connection = await connect({
+		chainId: goerli.id,
+		connector: rawConnector,
+	});
+	console.log("Connecting to:", connection);
+	fromAddress.value = connection.account;
+	showConnectors.value = false;
+}
+
+async function connect1() {
+	const connection = await connect({
+		chainId: goerli.id,
+		connector: new InjectedConnector(),
+	});
+	console.log("Connecting to:", connection);
+}
+async function getAccount1() {
+	const account = getAccount();
+	console.log("account", account);
+}
+</script>