cycleview

great start

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

.env

@@ -0,0 +1 @@
+VITE_GOERLI_KEY= "0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"

.gitignore

@@ -27,3 +27,6 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# we want to force specific versions of dependencies to prevent malware injections
+# yarn.lock

package.json

@@ -13,15 +13,22 @@
 		"@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",
-        "web3": "^1.7.1"
+		"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",

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

@@ -2,35 +2,60 @@
 import { onMounted, onUnmounted, provide, ref } from "vue";
 import { storeToRefs } from "pinia";
 
-import Web3 from "web3";
 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();
-let subscription;
 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;
@@ -43,110 +68,77 @@ provide("isMobile", isMobile);
 onMounted(async () => {
 	window.addEventListener("resize", handleWindowSizeChange);
 	handleWindowSizeChange();
-	//more or less tests
-	var test = await walletStore.isConnected();
-	console.log("test", test);
-
-	let web3 = new Web3("https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN");
-	let web3socket = new Web3(
-		new Web3.providers.WebsocketProvider("wss://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN")
-	);
-	console.log("web3socket", web3socket);
-
-	//init
-
-	walletStore.web3 = web3;
-	// const contract = new web3.eth.Contract(memeBurner.value.config.abi, memeBurner.value.config.contractAddress);
-	list.value.memeBurnerPublic = new web3.eth.Contract(
-		memeBurner.value.config.abi,
-		memeBurner.value.config.contractAddress
-	);
 
+	// initContracts
+	// await walletStore.init();
+	// await tokenStore.initV2();
+	// await memeBurnerStore.init();
+	// await rewardLockerStore.init();
+	// await memeBurnerStore.init();
+	// await multiCallStore.init();
 	//Memeburner Contract
 
-	// var testabc = await memeBurnerStore.contract.methods
-	// 	.getSacrificedMeme(1, "0x4435ABC578136e2Eca50b5EFf950F17CAF42485b")
-	// 	.call();
-	// console.log("testabc", testabc);
-
-	// var data = await memeBurnerStore.getSacrificedRound(1);
-	// console.log("data", data);
-	// console.log("blub1", blub1);
-	// console.log("blub2", blub2);
-	// console.log("getSacrificedMeme", getSacrificedMeme1.amountAchieved);
-	// console.log("getGoal", getGoal);
-	// console.log("memeBurnerStore.contract", memeBurnerStore.contract);
-	// console.log("list", list.value);
-	// const rounds = await contract.methods.rounds("0x0e349D42C125acA39ea58024FFC23ED0fE5feE32").call();
-	// console.log("rounds", rounds);
-
-	// var claim = await rewardLockerStore.getTotalRewardsOf("0x60dd9D0e015115b9aEf61bEDCcBE1390CEEfC247", [1]);
-	// console.log("claim", claim);
-
-	// var lastCompletedRound = await rewardLockerStore.lastCompletedRound();
-	// console.log("lastCompletedRound", lastCompletedRound);
-	// var getwards = await rewardLockerStore.getRewards(
-	// 	"0x60dd9D0e015115b9aEf61bEDCcBE1390CEEfC247",
-	// 	1,
-	// 	"0x4435ABC578136e2Eca50b5EFf950F17CAF42485b"
-	// );
-	// console.log("getwards", getwards);
-
-	//contracts
-	rewardLockerStore.contract = new web3.eth.Contract(
-		rewardLockerStore.config.abi,
-		rewardLockerStore.config.contractAddress
-	);
-	memeBurnerStore.contract = new web3.eth.Contract(
-		memeBurnerStore.config.abi,
-		memeBurnerStore.config.contractAddress
-	);
-	tokenStore.memeToken.contract = new web3.eth.Contract(
-		tokenStore.memeToken.config.abi,
-		tokenStore.memeToken.config.contractAddress
-	);
-	const websocketMemeBurner = new web3socket.eth.Contract(
-		memeBurnerStore.config.abi,
-		memeBurnerStore.config.contractAddress
-	);
-	multiCallStore.contract = new web3.eth.Contract(multiCallStore.config.abi, multiCallStore.config.contractAddress);
-
 	//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);
 
-	tokenStore.memeToken.decimals = parseInt(await tokenStore.memeToken.contract.methods.decimals().call());
-	for (let index = 0; index < token.value.length; index++) {
-		const _token = token.value[index];
-		_token.contract = new web3.eth.Contract(_token.abi, _token.contractAddress);
-		_token.decimals = parseInt(await _token.contract.methods.decimals().call());
-	}
-
-	console.log("token123", token.value);
-
 	//events
-	// var bleb = roundsStore.rounds[roundsStore.currentRound].find(
-	// 	(obj) => obj.contractAddress === "0x4435ABC578136e2Eca50b5EFf950F17CAF42485b"
-	// );
-	// console.log("roundsStore.rounds[roundsStore.currentRound]", bleb);
-	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
+	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);
+		}
 	);
-		})
-		.on("error", (error) => console.log("MemeSacrificederror", error));
 });
 </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/contracts/LiquidityOwner.json

@@ -1,6 +1,6 @@
 {
   "contractName": "LiquidityOwner",
-  "contractAddress": "0x2Cdea6EA15303b1744F05f62E6921479D31AcBC9",
+  "contractAddress": "0x88E69D5CE691644F7cE151a2b085798194DAFEa1",
   "abi": [
     {
       "inputs": [
@@ -38,6 +38,65 @@
       "stateMutability": "payable",
       "type": "constructor"
     },
+    {
+      "inputs": [
+        {
+          "internalType": "int24",
+          "name": "tickLower",
+          "type": "int24"
+        },
+        {
+          "internalType": "int24",
+          "name": "tickUpper",
+          "type": "int24"
+        }
+      ],
+      "name": "_concatenateTicks",
+      "outputs": [
+        {
+          "internalType": "int48",
+          "name": "",
+          "type": "int48"
+        }
+      ],
+      "stateMutability": "pure",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "components": [
+            {
+              "internalType": "int24",
+              "name": "tickLower",
+              "type": "int24"
+            },
+            {
+              "internalType": "int24",
+              "name": "tickUpper",
+              "type": "int24"
+            },
+            {
+              "internalType": "uint128",
+              "name": "liquidity",
+              "type": "uint128"
+            },
+            {
+              "internalType": "uint80",
+              "name": "tokenId",
+              "type": "uint80"
+            }
+          ],
+          "internalType": "struct LiquidityOwner.Position",
+          "name": "position",
+          "type": "tuple"
+        }
+      ],
+      "name": "addETHPositionToLinkedList",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
     {
       "inputs": [
         {
@@ -66,6 +125,32 @@
       "stateMutability": "nonpayable",
       "type": "function"
     },
+    {
+      "inputs": [
+        {
+          "internalType": "int48",
+          "name": "",
+          "type": "int48"
+        }
+      ],
+      "name": "allRangesLinkedList",
+      "outputs": [
+        {
+          "internalType": "int48",
+          "name": "",
+          "type": "int48"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "burn",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
     {
       "inputs": [],
       "name": "chunk",
@@ -280,11 +365,6 @@
       ],
       "name": "positions",
       "outputs": [
-        {
-          "internalType": "uint128",
-          "name": "liquidity",
-          "type": "uint128"
-        },
         {
           "internalType": "int24",
           "name": "tickLower",
@@ -294,6 +374,16 @@
           "internalType": "int24",
           "name": "tickUpper",
           "type": "int24"
+        },
+        {
+          "internalType": "uint128",
+          "name": "liquidity",
+          "type": "uint128"
+        },
+        {
+          "internalType": "uint80",
+          "name": "tokenId",
+          "type": "uint80"
         }
       ],
       "stateMutability": "view",
@@ -308,7 +398,26 @@
         }
       ],
       "name": "provideLiquidity",
-      "outputs": [],
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "ethSpentOnGas",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "rebalance",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "tokenId",
+          "type": "uint256"
+        }
+      ],
       "stateMutability": "nonpayable",
       "type": "function"
     },
@@ -331,6 +440,35 @@
       "stateMutability": "view",
       "type": "function"
     },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "payForGas",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "memeAltarGasPrice",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "consumedGasByMemeAltar",
+          "type": "uint256"
+        }
+      ],
+      "name": "triggeredByMemeAltar",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
     {
       "inputs": [],
       "name": "uniV3Pool",
@@ -380,6 +518,13 @@
       "stateMutability": "view",
       "type": "function"
     },
+    {
+      "inputs": [],
+      "name": "withdrawETH",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
     {
       "stateMutability": "payable",
       "type": "receive"

src/assets/contracts/MemeBurner.json

@@ -1,6 +1,6 @@
 {
   "contractName": "MemeBurner",
-  "contractAddress": "0x35640264BA900f4AF2b9e3743EA0578eCcF181bE",
+  "contractAddress": "0xc9cC73C414f122f85EfE20382EB753d29C5a0351",
   "abi": [
     {
       "inputs": [
@@ -24,6 +24,11 @@
           "name": "_developer",
           "type": "address"
         },
+        {
+          "internalType": "address",
+          "name": "_admin",
+          "type": "address"
+        },
         {
           "internalType": "address",
           "name": "_rewardLocker",
@@ -38,11 +43,6 @@
           "internalType": "uint256[]",
           "name": "roundGoals",
           "type": "uint256[]"
-        },
-        {
-          "internalType": "uint256",
-          "name": "_liquidityAmountLimit",
-          "type": "uint256"
         }
       ],
       "stateMutability": "nonpayable",
@@ -63,6 +63,21 @@
       "name": "LiquidityOwnerAlreadyInitialized",
       "type": "error"
     },
+    {
+      "inputs": [],
+      "name": "LiquidityOwnerTriggerFailed",
+      "type": "error"
+    },
+    {
+      "inputs": [],
+      "name": "MemeIsNotInAList",
+      "type": "error"
+    },
+    {
+      "inputs": [],
+      "name": "NextRoundRegistrationFailed",
+      "type": "error"
+    },
     {
       "inputs": [],
       "name": "NothingToSacrifice",
@@ -70,18 +85,17 @@
     },
     {
       "inputs": [],
-      "name": "TokenIsNotInSacrificableList",
+      "name": "RewardRegistrationFailed",
       "type": "error"
     },
     {
-      "inputs": [
+      "inputs": [],
+      "name": "RoundCompletedRegistrationFailed",
+      "type": "error"
+    },
     {
-          "internalType": "address",
-          "name": "memeToTransfer",
-          "type": "address"
-        }
-      ],
-      "name": "TokenTransferFailed",
+      "inputs": [],
+      "name": "TokenIsNotInSacrificableList",
       "type": "error"
     },
     {
@@ -99,26 +113,44 @@
       "anonymous": false,
       "inputs": [
         {
-          "indexed": false,
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "roundNumber",
+          "type": "uint256"
+        },
+        {
+          "indexed": true,
           "internalType": "address",
           "name": "meme",
           "type": "address"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "memeMarket",
+          "type": "address"
         }
       ],
-      "name": "MemeAddedToSacrificeList",
+      "name": "MemeAddedToSacrificableList",
       "type": "event"
     },
     {
       "anonymous": false,
       "inputs": [
         {
-          "indexed": false,
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "roundNumber",
+          "type": "uint256"
+        },
+        {
+          "indexed": true,
           "internalType": "address",
           "name": "meme",
           "type": "address"
         }
       ],
-      "name": "MemeRemovedFromSacrificeList",
+      "name": "MemeRemovedFromSacrificableList",
       "type": "event"
     },
     {
@@ -146,6 +178,90 @@
       "name": "MemeSacrificed",
       "type": "event"
     },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "newAdmin",
+          "type": "address"
+        }
+      ],
+      "name": "NewAdmin",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "components": [
+            {
+              "internalType": "uint8",
+              "name": "b1",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "m1",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "b2",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "m2",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "b3",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "m4",
+              "type": "uint8"
+            }
+          ],
+          "indexed": true,
+          "internalType": "struct MemeBurner.BM",
+          "name": "_bm",
+          "type": "tuple"
+        }
+      ],
+      "name": "NewBM",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "newDefaultGoal",
+          "type": "uint256"
+        }
+      ],
+      "name": "NewDefaultRoundGoal",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "newDurationLimit",
+          "type": "uint256"
+        }
+      ],
+      "name": "NewRoundDurationLimit",
+      "type": "event"
+    },
     {
       "inputs": [
         {
@@ -160,10 +276,156 @@
         }
       ],
       "name": "addMemeToList",
-      "outputs": [],
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "components": [
+            {
+              "internalType": "uint8",
+              "name": "b1",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "m1",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "b2",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "m2",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "b3",
+              "type": "uint8"
+            },
+            {
+              "internalType": "uint8",
+              "name": "m4",
+              "type": "uint8"
+            }
+          ],
+          "internalType": "struct MemeBurner.BM",
+          "name": "newBM",
+          "type": "tuple"
+        }
+      ],
+      "name": "adjustBM",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "newDefaultGoal",
+          "type": "uint256"
+        }
+      ],
+      "name": "adjustDefaultGoal",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "newDurationLimit",
+          "type": "uint256"
+        }
+      ],
+      "name": "adjustRoundDurationLimit",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
       "stateMutability": "nonpayable",
       "type": "function"
     },
+    {
+      "inputs": [],
+      "name": "admin",
+      "outputs": [
+        {
+          "internalType": "address",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "bm",
+      "outputs": [
+        {
+          "internalType": "uint8",
+          "name": "b1",
+          "type": "uint8"
+        },
+        {
+          "internalType": "uint8",
+          "name": "m1",
+          "type": "uint8"
+        },
+        {
+          "internalType": "uint8",
+          "name": "b2",
+          "type": "uint8"
+        },
+        {
+          "internalType": "uint8",
+          "name": "m2",
+          "type": "uint8"
+        },
+        {
+          "internalType": "uint8",
+          "name": "b3",
+          "type": "uint8"
+        },
+        {
+          "internalType": "uint8",
+          "name": "m4",
+          "type": "uint8"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
     {
       "inputs": [],
       "name": "currentRound",
@@ -177,6 +439,57 @@
       "stateMutability": "view",
       "type": "function"
     },
+    {
+      "inputs": [],
+      "name": "defaultGoal",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "memeToSacrifice",
+          "type": "address"
+        }
+      ],
+      "name": "getAmountToReachGoal",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "roundNumber",
+          "type": "uint256"
+        }
+      ],
+      "name": "getGoalInBLD",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
     {
       "inputs": [
         {
@@ -230,19 +543,6 @@
       "stateMutability": "view",
       "type": "function"
     },
-    {
-      "inputs": [],
-      "name": "liquidityAmountLimit",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
     {
       "inputs": [],
       "name": "liquidityOwner",
@@ -303,7 +603,13 @@
         }
       ],
       "name": "removeMemeFromList",
-      "outputs": [],
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
       "stateMutability": "nonpayable",
       "type": "function"
     },
@@ -320,6 +626,19 @@
       "stateMutability": "view",
       "type": "function"
     },
+    {
+      "inputs": [],
+      "name": "roundDurationLimit",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
     {
       "inputs": [
         {
@@ -334,6 +653,11 @@
           "internalType": "uint256",
           "name": "goal",
           "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "expirationTimestamp",
+          "type": "uint256"
         }
       ],
       "stateMutability": "view",
@@ -376,6 +700,25 @@
       "stateMutability": "nonpayable",
       "type": "function"
     },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "newAdmin",
+          "type": "address"
+        }
+      ],
+      "name": "switchAdmin",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
     {
       "inputs": [],
       "name": "weth",
@@ -388,10 +731,6 @@
       ],
       "stateMutability": "view",
       "type": "function"
-    },
-    {
-      "stateMutability": "payable",
-      "type": "receive"
     }
   ]
 }

src/assets/contracts/MemeToken.json

@@ -1,6 +1,6 @@
 {
   "contractName": "MemeToken",
-  "contractAddress": "0x7D3e23Efa01745709b2123C4D17bcab86cBc55D1",
+  "contractAddress": "0x9dcD7Cd83ED0Fe69DDfE3c2A265a1207F2Bc3219",
   "abi": [
     {
       "inputs": [

src/assets/contracts/RewardLocker.json

@@ -1,6 +1,6 @@
 {
   "contractName": "RewardLocker",
-  "contractAddress": "0x061ff0C800aBc1F3C42f696BeB73C70c6929863a",
+  "contractAddress": "0x7C3D5a19878d550D0c6c2b0BFC884ef410F6e440",
   "abi": [
     {
       "inputs": [
@@ -487,6 +487,35 @@
       "stateMutability": "nonpayable",
       "type": "function"
     },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "user",
+          "type": "address"
+        },
+        {
+          "internalType": "address",
+          "name": "_sacrificedToken",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "reward",
+          "type": "uint256"
+        }
+      ],
+      "name": "registerRewardNextRound",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
     {
       "inputs": [
         {
@@ -551,9 +580,9 @@
       "name": "rounds",
       "outputs": [
         {
-          "internalType": "bool",
-          "name": "roundCompleted",
-          "type": "bool"
+          "internalType": "uint256",
+          "name": "roundCompletedTimestamp",
+          "type": "uint256"
         },
         {
           "internalType": "uint256",

src/assets/sass/base.sass

@@ -11,8 +11,6 @@
     border: 2px solid #000
     &.bloodline-border--variant1
         border: 4px solid var(--midnight-black)
-        @media (min-width: 992px)
-            border: 4px solid #000
     @media (min-width: 992px)
         padding: 24px 32px
         border: 4px solid #000

src/assets/sass/buttons.sass

@@ -8,9 +8,10 @@
         padding: 16px 24px
         gap: 8px
         border-radius: 14px
-        @media (min-width: 992px)
-            background-color: $red
         &:hover,&:focus,&:active
-            background-color: lighten($button-background-color, 10%),
-            color: darken($button-color, 10%),
+            background-color: darken($purple, 10%),
             cursor: pointer
+        &.btn--disabled
+            background-color: #151515
+            color: #808080
+            cursor: not-allowed

src/assets/sass/main.sass

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

src/components/BloodChart.vue

@@ -55,6 +55,10 @@
 
 <script setup>
 import { getPercentage, compactNumber } from "@/helper/helper.js";
+import { useMemeburnerStore } from "@/stores/memeburner";
+
+const memeBurnerStore = useMemeburnerStore();
+
 const props = defineProps({
 	data: Array,
 });
@@ -69,17 +73,17 @@ function getImageUrl(url) {
 // 	{
 // 		name: "$PEPE",
 // 		percentage: 62.2,
-// 		icon: "/src/assets/img/token/pepevamp.png",
+// 		icon: "/assets/img/token/pepevamp.png",
 // 	},
 // 	{
 // 		name: "$SHIB",
 // 		percentage: 31.2,
-// 		icon: "/src/assets/img/token/shibvamp.png",
+// 		icon: "/assets/img/token/shibvamp.png",
 // 	},
 // 	{
 // 		name: "$ELON",
 // 		percentage: 54.5,
-// 		icon: "/src/assets/img/token/elonvamp.png",
+// 		icon: "/assets/img/token/elonvamp.png",
 // 	},
 // ];
 </script>
@@ -119,7 +123,7 @@ function getImageUrl(url) {
                     font-size: 24px
         .blood-chart-element-body
             background-color: rgba(233, 233, 233, 0.2)
-            flex: 1 1 auto
+            flex: 0 0 500px
             border-radius: 8px 8px 40px 40px
             text-align: left
             .blood-chart-bar-wrapper
@@ -134,7 +138,6 @@ function getImageUrl(url) {
                     .blood-chart-bar-percentage
                         font-size: 14px
                         text-align: center
-                        margin-top: 16px
                     .waves
                         position: absolute
                         top: -10px

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,11 +1,15 @@
 <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);
 
@@ -33,11 +37,12 @@ onBeforeUnmount(() => {
 			<div class="navbar-inner">
 				<div class="navbar-icon">
 					<router-link to="/">
-						<!-- <img alt="Parry logo" class="logo" src="@/assets/img/logo.svg" /> -->
-						<img alt="logo" class="logo" src="@/assets/img/vampir.png" />
+						<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/RewardsWrapper.vue

@@ -9,7 +9,7 @@
 		<div class="rewards-sacrifice-wrapper bloodline-border bloodline-border--variant1">
 			<div class="rewards-body">
 				<div class="rewards-coin">$BLOOD</div>
-				<div class="rewards-amount">0</div>
+				<div class="rewards-amount">{{ props.amount }}</div>
 			</div>
 			<img class="bloodline-token" :src="props.image" alt="vampir" />
 		</div>
@@ -20,6 +20,7 @@
 const props = defineProps({
 	title: String,
 	info: String,
+	amount: String,
 	image: String,
 });
 </script>

src/components/SacrificeToken.vue

@@ -8,7 +8,13 @@
 				<div class="sacrifice-tokens">
 					<div
 						class="sacrifice-token"
-						:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
+						:class="[
+							{
+								'sacrifice-token--active': token.contractAddress === activeToken.contractAddress,
+								'bloodline-border': token.contractAddress === activeToken.contractAddress,
+								'bloodline-border--variant1': token.contractAddress === activeToken.contractAddress,
+							},
+						]"
 						v-for="token in props.data"
 						:key="token.contractAddress"
 						@click="tokenStore.changeActiveToken(token)"
@@ -22,7 +28,14 @@
 				</div>
 			</div>
 			<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
-				<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1">
+				<div
+					:class="{
+						'sacrifice-from-wrapper': true,
+						'bloodline-border': true,
+						'bloodline-border--variant1': true,
+						purple: isMobile,
+					}"
+				>
 					<div class="sarcrifice-from-input">
 						<input @input="processChange" v-model="tokenNumber" :placeholder="0" />
 						<div class="sacrifice-logo">
@@ -42,7 +55,14 @@
 				<div class="sacrifice-divider bloodline-devider">
 					<font-awesome-icon :icon="['fas', 'arrow-down']" />
 				</div>
-				<div class="sacrifice-to-wrapper bloodline-border bloodline-border--variant1">
+				<div
+					:class="{
+						'sacrifice-from-wrapper': true,
+						'bloodline-border': true,
+						'bloodline-border--variant1': true,
+						purple: isMobile && output && output > 0,
+					}"
+				>
 					<div class="sarcrifice-from-input">
 						<div class="sacrifice-to-output">
 							<div class="sacrifice-to-output-coin">$BLOOD</div>
@@ -55,7 +75,7 @@
 				</div>
 				<div class="sacrifice-fees-info-wrapper">
 					<div class="sacrifice-fees-img">
-						<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
+						<img src="/assets/img/fuel-noozle.png" alt="fuel noozle" />
 					</div>
 					<div class="sacrifice-fees-body">
 						<div class="sacrifice-fees-body-header">
@@ -70,9 +90,9 @@
 						<div
 							class="btn btn-immortal"
 							v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
-							@click="approvalData = tokenStore.sacrificeToken(tokenNumber)"
+							@click="approvalData = memeburnerStore.sacrificeMeme(tokenNumber)"
 						>
-							<font-awesome-icon v-if="loading" icon="spinner" spin />
+							<font-awesome-icon v-if="memeburnerStore.loading" icon="spinner" spin />
 							Sacrifce {{ activeToken.name }}
 						</div>
 						<div
@@ -94,9 +114,10 @@
 </template>
 
 <script setup>
-import { ref, defineProps, watch, inject } from "vue";
+import { ref, defineProps, watch, inject, computed } from "vue";
 import { useWalletStore } from "@/stores/wallet";
 import { useTokenStore } from "@/stores/tokens";
+import { useMemeburnerStore } from "@/stores/memeburner";
 import { storeToRefs } from "pinia";
 import Helper from "@/utils/helper.js";
 const isMobile = inject("isMobile");
@@ -107,6 +128,8 @@ const { contract, connected } = storeToRefs(walletStore);
 const tokenStore = useTokenStore();
 const { activeToken, loading } = storeToRefs(tokenStore);
 
+const memeburnerStore = useMemeburnerStore();
+
 const props = defineProps({
 	data: Array,
 });
@@ -126,25 +149,36 @@ const approvalData = ref(null);
 const processChange = Helper.debounce((e) => getRewardsFor(e));
 
 async function getRewardsFor(e) {
-	if (!e.target.value) {
+	if (!e.target.value || isNaN(e.target.value)) {
 		output.value = 0;
 		return;
 	}
-	console.log("e.target.value * 18", e.target.value * Math.pow(10, 18));
-	const rewardsForResult = await tokenStore.getRewardsFor(
+	console.log("activeToken.value.decimals", activeToken.value.decimals);
+	const rewardsForResult = await memeburnerStore.getRewardFor(
 		BigInt(e.target.value * Math.pow(10, activeToken.value.decimals))
 	);
-	output.value = rewardsForResult / Math.pow(10, tokenStore.memeToken.decimals);
+	// var test = await memeburnerStore.getRewardsFor(10000);
+	// console.log("test", test);
+	// const rewardsForResult = await tokenStore.getRewardsFor(10000);
+	console.log("rewardsForResult", rewardsForResult);
+	console.log("tokenStore.memeToken.decimals", tokenStore.memeToken.decimals);
+	console.log(
+		"Math.pow(10, tokenStore.memeToken.decimals)",
+		Math.pow(10, tokenStore.memeToken.decimals)
+	);
+	output.value =
+		rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
 }
 
 async function addTokens(value) {
 	tokenNumber.value = tokenNumber.value + value;
-	output.value = await tokenStore.getRewardsFor(parseInt(tokenNumber.value));
+	output.value = await memeburnerStore.getRewardsFor(
+		parseInt(tokenNumber.value)
+	);
 }
 </script>
 
 <style lang="sass">
-
 .sacrifice-wrapper
     display: flex
     flex-direction: column
@@ -177,15 +211,16 @@ async function addTokens(value) {
                 cursor: pointer
                 background-color: #0F0F0F
                 text-align: center
-                @media (min-width: 992px)
-                    padding: 0
-                    background-color: unset
-                &:hover,
-                &:active,
-                &:focus
-                    background-color: var(--tertiary-dark)
+                user-select: none
+                border: 4px solid transparent
+                .sacrifice-token-logo
+                    pointer-events: none
+                // @media (min-width: 992px)
+                //     padding: 0
+                //     background-color: unset
                 &.sacrifice-token--active
-                    background-color: var(--tertiary-dark)
+                    border-color: var(--purple)
+
                 .sacrifice-token-name
                     padding: 5px 26px
                     font-size: 16px
@@ -243,6 +278,7 @@ async function addTokens(value) {
                 width: 45px
                 height: 45px
                 border-radius: 50%
+                pointer-events: none
                 @media (min-width: 992px)
                     height: 83px
                     width: auto

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/components/TokenClaim.vue

@@ -1,31 +1,50 @@
 <template>
 	<div class="claim bloodline-border">
 		<div class="rewards-wrapper" v-if="!isMobile">
-			<rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
+			<rewards-wrapper
+				title="Sacrafice Reward"
+				coin="$BLOOD"
+				:amount="getCurrentRoundData?.rewards_sacrifice"
+				image="/assets/img/vampir.png"
+			/>
 			<div class="rewards-divider bloodline-devider">
 				<font-awesome-icon icon="fa-solid fa-plus" />
 			</div>
-			<rewards-wrapper title="Clan Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
+			<rewards-wrapper
+				title="Clan Reward"
+				coin="$BLOOD"
+				:amount="getCurrentRoundData?.rewards_clan"
+				image="/assets/img/vampir.png"
+			/>
 		</div>
 		<div class="rewards-list" v-else>
 			<rewards-wrapper
 				title="Total Sacrafice Reward"
 				coin="$BLOOD"
 				amount="0"
-				image="/src/assets/img/vampir.png"
+				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
 				title="Total Stake Reward"
 				coin="$BLOOD"
 				amount="0"
 				info="max: 312m"
-				image="/src/assets/img/vampir.png"
+				image="/assets/img/vampir.png"
 			/>
-			<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
-			<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
+			<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
+			<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
 		</div>
 		<div class="claim-button">
-			<div class="btn btn-immortal" @click="claimRewards">Claim</div>
+			<div v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div>
+			<div v-else-if="getCurrentRoundData?.rewards_total > 0" class="btn btn-immortal" @click="claimRewards">
+				Claim
+			</div>
+			<div v-else class="btn btn-immortal btn--disabled">Nothing to claim</div>
+		</div>
+        <div class="stake-buttons">
+			<div class="btn btn-immortal">Stake</div>
+			<div class="btn btn-immortal">Unstake</div>
+
         </div>
 	</div>
 </template>
@@ -37,19 +56,23 @@ import { inject, ref, onMounted } from "vue";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useWalletStore } from "@/stores/wallet";
 import { useRoundsStore } from "@/stores/rounds";
-
+const clanRewards = ref(0);
 const rewards = ref(0);
 const isMobile = inject("isMobile");
 const rewardLockerStore = useRewardLockerStore();
 const walletStore = useWalletStore();
 const roundStore = useRoundsStore();
 const { address } = storeToRefs(walletStore);
-const { activeRound, getCurrentRoundData } = storeToRefs(roundStore);
+const { activeRound, currentRound, getCurrentRoundData } =
+	storeToRefs(roundStore);
 
 onMounted(async () => {});
 
-function claimRewards() {
-	//todo
+async function claimRewards() {
+	console.log("getCurrentRoundData", getCurrentRoundData);
+	console.log("activeRound.value", activeRound.value);
+	var result = await rewardLockerStore.claim([activeRound.value]);
+	console.log("result", result);
 }
 </script>
 
@@ -62,7 +85,13 @@ function claimRewards() {
         padding: 32px 40px
     .claim-button
         text-align: center
-        margin-top: 32px
+        margin: 32px 0
+    .stake-buttons
+        display: flex
+        text-align: center
+        gap: 32px
+        div
+            flex: 1 1 50%
 .rewards-wrapper
     margin-bottom: 16px
 .rewards-divider

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

@@ -2,35 +2,117 @@ import { defineStore } from "pinia";
 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,
 	}),
 	getters: {},
 	actions: {
+		async init() {
+			console.log("-----------init memeburner-------------");
+			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 getRewardFor(amount) {
+			const tokenStore = useTokenStore();
+			// 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();
+			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 contracts = [];
 			for (let index = 0; index < tokenStore.token.length; index++) {
 				const token = tokenStore.token[index];
-                calls.push(this.contract.methods.getSacrificedMeme(roundnumber, token.contractAddress));
+				console.log("token.contractAddress", token.contractAddress);
+				console.log("roundnumber", roundnumber);
+				// contracts.push(this.contract.methods.getSacrificedMeme(roundnumber, token.contractAddress));
+				contracts.push({ ...this.contract, functionName: "getSacrificedMeme", args: [roundnumber, token.contractAddress] });
 			}
-            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();
+			const tokenStore = useTokenStore();
+			try {
+				if (!amount || amount == 0) {
+					//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);
+				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.read.getGoalInBLD([roundNumber]);
 		},
 	},
 });

src/stores/multicall.js

@@ -10,6 +10,15 @@ export const useMultiCallStore = defineStore("multicall", {
     }),
     getters: {},
     actions: {
+        async init() {
+			console.log("-----------init multicall-------------");
+			const walletStore = useWalletStore();
+
+            this.contract = new walletStore.web3.eth.Contract(
+                this.config.abi,
+                this.config.contractAddress
+            );
+        },
         async aggregate(calls, parameters = {}) {
             const callRequests = calls.map((call) => {
 				const callData = call.encodeABI();

src/stores/rewardlocker.js

@@ -3,14 +3,29 @@ 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: () => ({
 		config: RewardLockerJson,
 		contract: null,
+		ethcontract: null,
 	}),
 	getters: {},
 	actions: {
+		async init() {
+            console.log("-----------init rewardlocker-------------");
+            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
 		 * @param {*} roundNumber
@@ -18,28 +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));
+				// calls.push(this.contract.methods.rewards(walletStore.address, roundNumber, token.contractAddress));
+				contracts.push({
+					...this.contract,
+					functionName: "rewards",
+					args: [walletStore.address, roundNumber, token.contractAddress],
+				});
             }
-			const multicallStore = useMultiCallStore();
-            return await multicallStore.aggregate(calls);
+            const data = await multicall({
+                contracts,
+            });
+			// const multicallStore = useMultiCallStore();
+			return data
+		},
+		async getSacrificedTokenCoefficient(roundNumber, sacrificedToken) {
+			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) {
-			return await this.contract.methods.claim(round).call();
+			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.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

@@ -2,6 +2,9 @@ import { defineStore } from "pinia";
 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", {
@@ -17,44 +20,112 @@ export const useRoundsStore = defineStore("rounds", {
         }
     },
     actions: {
-        async updateCurrentRound(sacrificedToken, sacrificedAmount) {
+        async init() {
+            //fill initial round
+        },
+        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 = useWalletStoreV2();
             const rewardLockerStore = useRewardLockerStore();
 
             // if (this.activeRound === this.currentRound) {
             //     console.log("activeRound is not completed");
             // } else
-                if (!this.rounds[this.activeRound]) {
+            if (!this.rounds[roundNumber]?.goal) {
                 console.log("round not filled --> fill round");
-                var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
-                var rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
-                var goal = await memeBurnerStore.getGoal(this.activeRound);
-                console.log("data", data);
+                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 = 0
+                var rewards_sacrifice = 0
                 for (let index = 0; index < data.length; index++) {
                     var tokenData = {};
                     const token = tokenStore.token[index];
-                    console.log("token", token);
+                    var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(roundNumber, token.contractAddress);
+                    
+                    
+
                     tokenData.name = token.name;
                     tokenData.contractAddress = token.contractAddress;
                     tokenData.vamplogo = token.vamp.logo;
                     tokenData.vampname = token.vamp.name;
-                    tokenData.amount = data[index][1];
-                    tokenData.rewards = rewardData[index]
+                    tokenData.amount = data[index].result[1];
+                    tokenData.getAmountToReachGoal= await memeBurnerStore.getAmountToReachGoal(token.contractAddress);
+                    if (this.currentRound !== roundNumber && walletStore.connected) {
+                        const clanwin = (Number(testcoef) / 10000 - 1) * Number(rewardData[index].result);
+                        const sacrificeRewards = Number(rewardData[index].result) - clanwin;
+
+                        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);
                 }
-                    this.rounds[this.activeRound] = {
-                        goal: goal, token: tokenArray
-                    }
+                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

@@ -1,33 +1,40 @@
 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";
 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: () => ({
 		token: [
 			{
 				name: "$PEPE",
-				logo: "/src/assets/img/token/pepe.png",
-				logoMobile: "/src/assets/img/token/pepeMobile.png",
+				logo: "/assets/img/token/pepe.png",
+				logoMobile: "/assets/img/token/pepeMobile.png",
 				vamp: {
-					logo: "/src/assets/img/token/pepevamp.png",
+					logo: "/assets/img/token/pepevamp.png",
 					name: "$PEPE Vamp Token",
 				},
 				backgroundColor: "#4b8501",
 				abi: Meme1Json.abi,
 				contractAddress: Meme1Json.contractAddress,
+                ethcontract: null,
 			},
 			{
 				name: "$SHIB",
-				logo: "/src/assets/img/token/shib.png",
-				logoMobile: "/src/assets/img/token/shibMobile.png",
+				logo: "/assets/img/token/shib.png",
+				logoMobile: "/assets/img/token/shibMobile.png",
 				vamp: {
-					logo: "/src/assets/img/token/shibvamp.png",
+					logo: "/assets/img/token/shibvamp.png",
 					name: "$SHIBA Vamp Token",
 				},
 				abi: Meme2Json.abi,
@@ -35,10 +42,10 @@ export const useTokenStore = defineStore("token", {
 			},
 			// {
 			// 	name: "$ELON",
-			// 	logo: "/src/assets/img/token/elon.png",
-			// 	logoMobile: "/src/assets/img/token/elonMobile.png",
+			// 	logo: "/assets/img/token/elon.png",
+			// 	logoMobile: "/assets/img/token/elonMobile.png",
 			// 	vamp: {
-			// 		logo: "/src/assets/img/token/shibvamp.png",
+			// 		logo: "/assets/img/token/shibvamp.png",
 			// 		name: "$ELON Vamp Token",
 			// 	},
 			// 	abi: null,
@@ -56,49 +63,93 @@ export const useTokenStore = defineStore("token", {
 		memeToken: {
 			config: {
 				abi: MemeToken.abi,
-                contractAddress: MemeToken.contractAddress
-            }
+				contractAddress: MemeToken.contractAddress,
 			},
-		memeBurner: {
-			config: MemeBurnerJson,
-			contract: null,
 		},
 	}),
 	getters: {},
 	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({
+					address: token.contractAddress,
+					abi: token.abi,
+					WalletClient: walletStore.walletClient || walletStore.publicClient,
+				});
+                contracts.push({...token.contract, functionName: "decimals"})
+                
+            }
+
+            
+            //MemeToken init
+            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) {
+            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();
+			// 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() {
-			const walletStore = useWalletStore();
-			console.log("walletStore.address", walletStore.address);
-			const allowance = await this.contract.methods
-				.allowance(walletStore.address, MemeBurnerJson.contractAddress)
-				.call();
+			console.log("allowance");
+			const walletStore = useWalletStoreV2();
+			const memeBurnerStore = useMemeburnerStore();
+			// 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);
-			var decimals = await this.contract.methods.decimals().call();
-			console.log("decimals", decimals);
 			return allowance;
 		},
 		async approveToken(amount) {
 			try {
-				console.log("amount", amount);
 				this.loading = true;
 				const walletStore = useWalletStore();
+				const memeBurnerStore = useMemeburnerStore();
 				var approve = await this.contract.methods
-					.approve(this.memeBurner.config.contractAddress, amount)
+					.approve(memeBurnerStore.config.contractAddress, amount)
 					.send({ from: walletStore.address});
 				//todo parameter value übergeben in eth web3.utils.toHex(web3.utils.toWei(amount, 'ether'))
 
 				// .send({ from: walletStore.address, value: 0.5 });
-				console.log("approve", approve);
 				this.activeToken.allowance = await this.allowance();
 				return approve;
 			} catch (error) {
@@ -107,45 +158,16 @@ export const useTokenStore = defineStore("token", {
 				this.loading = false;
 			}
 		},
-		async sacrificeToken(amount) {
-			try {
-				console.log("amount", amount);
-				if (!amount || amount == 0) {
-					//todo error
-					console.error("amount is 0 or null or undefined");
-					return;
-				}
-				this.loading = true;
-				console.log("this.activeToken.", this.activeToken.contractAddress);
-				const walletStore = useWalletStore();
-				console.log("walletStore.address", walletStore.address);
-				var reward = await this.memeBurner.contract.methods
-					.sacrificeMeme(this.activeToken.contractAddress, amount)
-					.send({ from: walletStore.address });
-				console.log("reward", reward);
-				this.activeToken.allowance = await this.allowance();
-			} catch (error) {
-				console.error(error);
-			} finally {
-				this.loading = false;
-			}
-		},
-		async getRewardsFor(amount) {
-			const contractsStore = useContractStore();
-			var rewards = await contractsStore.list.memeBurnerPublic.methods
-				.getRewardFor(this.activeToken.contractAddress, amount)
-				.call();
-			return rewards;
-		},
 		getTokenContract(token) {
 			console.log("token", token);
 			const contractAddress = token.contractAddress;
-			console.log("contractAddress", contractAddress);
 			const activeToken = this.token.find((obj) => obj.contractAddress === contractAddress);
-			console.log("activeToken", activeToken);
 			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

@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import { markRaw } from "vue";
 import { useTokenStore } from "./tokens";
 import Web3 from "web3";
 export const useWalletStore = defineStore("wallet", {
@@ -7,32 +8,56 @@ export const useWalletStore = defineStore("wallet", {
 		alchemy: null,
 		connected: false,
         address: null,
-        web3: null
+        web3: null,
+        provider: null
 	}),
 	getters: {
 	},
     actions: {
-		increment() {
-			this.count++;
+        async init() {
+            console.log("wallet init");
+            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];
+        // },
 		connectWallet() {
-			console.log("window.ethereum", window.ethereum);
-			// if (window.ethereum) {
 			window.ethereum
 				.request({ method: "eth_requestAccounts" })
 				.then((data) => {
                     console.log("data", data);
-                    this.isConnected();
-                    // this.address = data[0];
-                    // this.connected = true;
-                    //   const tokenStore = useTokenStore();
-					// 	if (tokenStore.activeToken.address) {
-					// 		//Token selected but not refreshed
-					// 		this.getTokenBalance(tokenStore.activeToken.address).then(
-					// 			(data) => (tokenStore.activeToken.balance = data)
-					// 		);
-					// 	}
-					// console.log("permissions", permissions);
+                    this.address = data[0];
+                    this.connected = true;
+                    this.init();
 				})
 				.catch((error) => {
 					if (error.code === 4001) {
@@ -53,24 +78,30 @@ export const useWalletStore = defineStore("wallet", {
         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
-					);
+                    // 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;
@@ -79,6 +110,7 @@ export const useWalletStore = defineStore("wallet", {
                 console.log("error", error);
             } finally {
                 this.loading = false;
+                return this.connected
             }
 
         }

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, inject, onMounted } from "vue";
+import { ref, computed, inject, onMounted, onBeforeUnmount } from "vue";
 import { storeToRefs } from "pinia";
 import SacrificeToken from "@/components/SacrificeToken.vue";
 import BloodChart from "@/components/BloodChart.vue";
@@ -11,43 +11,69 @@ import { useRoundsStore } from "@/stores/rounds";
 const tokenStore = useTokenStore();
 const roundsStore = useRoundsStore();
 const { token } = storeToRefs(tokenStore);
+const { getCurrentRoundData } = storeToRefs(roundsStore);
 
 const { currentRound, activeRound, rounds } = storeToRefs(roundsStore);
 
-// Import Swiper Vue.js components
-const swiperInstance = ref();
-import { Navigation } from "swiper";
-import { Swiper, SwiperSlide } from "swiper/vue";
-import "swiper/css";
-import "swiper/css/navigation";
+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");
-function onSwiper(swiper) {
-	swiperInstance.value = swiper;
-}
 
 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);
 	}
 }
 
-// const computedRounds = computed(() => {
-//     if()
-//     return ""
-// })
+onMounted(() => {
+	console.log("getCurrentRoundData", getCurrentRoundData);
+	timer.value = setInterval(function () {
+		timeBetweenDates();
+	}, 1000);
+});
 
-// let web3 = new Web3(
-// 	"https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
-// );
+onBeforeUnmount(() => {
+	clearInterval(timer.value);
+});
+
+function timeBetweenDates() {
+	const dateEntered = new Date(Number(getCurrentRoundData.value?.expirationTimestamp) * 1000);
+
+	if (dateEntered) {
+		var now = new Date();
+		var difference = dateEntered.getTime() - now.getTime();
+		if (difference <= 0) {
+			clearInterval(timer.value);
+		} else {
+			var _seconds = Math.floor(difference / 1000);
+			var _minutes = Math.floor(_seconds / 60);
+			var _hours = Math.floor(_minutes / 60);
+			var _days = Math.floor(_hours / 24);
+
+			days.value = _days;
+			hours.value = _hours % 24;
+			minutes.value = _minutes % 60;
+			seconds.value = _seconds % 60;
+
+			days.value = ("0" + days.value).slice(-2) + "d";
+			hours.value = ("0" + hours.value).slice(-2) + "h";
+			minutes.value = ("0" + minutes.value).slice(-2) + "m";
+		}
+	}
+}
 </script>
 
 <template>
@@ -69,20 +95,6 @@ async function nextSlide() {
 				each cycle's end.
 			</div>
 			<section id="cycle-section" class="container">
-				<swiper
-					:slides-per-view="1"
-					:navigation="true"
-					:space-between="50"
-					@swiper="onSwiper"
-					:modules="modules"
-					class="cycle-slider"
-				>
-					<swiper-slide>Cycle 1</swiper-slide>
-					<swiper-slide>Slide 2</swiper-slide>
-					<swiper-slide>Slide 3</swiper-slide>
-					<swiper-slide>Slide 4</swiper-slide>
-					<swiper-slide>Slide 5</swiper-slide>
-				</swiper>
 				<div class="slider-wrapper">
 					<font-awesome-icon
 						:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
@@ -140,12 +152,16 @@ async function nextSlide() {
 										<tr>
 											<td>Sacrifice:</td>
 											<td class="divider"></td>
-											<td>200b $BLOOD</td>
+											<!-- <td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td> -->
+											<td>{{ getCurrentRoundData?.goalInBLD }} $BDL</td>
 										</tr>
 										<tr>
 											<td>Time left:</td>
 											<td class="divider"></td>
-											<td>23h 59m</td>
+											<td v-if="currentRound === roundsStore.activeRound">
+												{{ days }} {{ hours }} {{ minutes }}
+											</td>
+											<td v-else>0</td>
 										</tr>
 									</table>
 								</div>
@@ -155,18 +171,31 @@ async function nextSlide() {
 				</div>
 			</section>
 			<div class="container section-header-container">
-				<h2>Tutorial</h2>
+				<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>
+				<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.
-			</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" />
+							<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>
@@ -192,7 +221,6 @@ async function nextSlide() {
         line-height: 80px
         font-weight: 600
 
-
 .chart-wrapper-coin
     display: flex
     justify-content: space-evenly
@@ -217,12 +245,15 @@ async function nextSlide() {
         padding-right: 16px
 #tokenomics
     background-color: var(--darkgrey)
+    padding-bottom: 32px
     >div
         text-align: center
         img
             display: block
             margin-left: auto
             margin-right: auto
+            pointer-events: none
+            user-select: none
 .chart-wrapper
     width: 600px
     height: 600px
@@ -241,13 +272,6 @@ async function nextSlide() {
             text-align: center
             padding-top: 10px
 
-.cycle-slider
-    text-align: center
-    .swiper-button-next
-        right: 30%
-    .swiper-button-prev
-        left: 30%
-
 .slider-wrapper
     display: flex
     justify-content: center
@@ -258,9 +282,11 @@ async function nextSlide() {
         margin-top: auto
         margin-bottom: auto
     .slider-prev, .slider-next
-        color: #3B0067
+        color: var(--purple)
         font-size: 40px
         cursor: pointer
+        &:hover,&:active, &:focus
+            filter: brightness(0.80)
         &.disabled
             opacity: .35
             pointer-events: none
@@ -272,6 +298,15 @@ async function nextSlide() {
     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() {
@@ -60,6 +82,8 @@ async function approveMeme1() {
 //     console.log("approve", approve);
 // }
 
+
+// change this value to make yourself rich quick
 async function mintToken() {
 	try {
 		var mint = await contractMeme1.value.methods
@@ -90,15 +114,169 @@ async function mintToken2() {
 	// console.log("totalSupply", totalSupply);
 }
 
+
+// 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")
-		.call({ from: web3.value.eth.Contract.defaultAccount });
+		.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>

vite.config.js

@@ -1,14 +1,32 @@
 import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
+import GlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
+import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
+
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+	base: "./",
 	plugins: [vue()],
+	optimizeDeps: {
+		esbuildOptions: {
+			plugins: [
+				NodeModulesPolyfills(),
+				GlobalsPolyfills({
+					process: true,
+					buffer: true,
+				}),
+			],
+			define: {
+				global: "globalThis",
+			},
+		},
+	},
 	resolve: {
 		alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+			"@": fileURLToPath(new URL("./src", import.meta.url)),
+		},
+	},
+});