cycleview

index.html

@@ -8,7 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="/src/assets/js/blockies.min.js"></script>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package.json

@@ -15,14 +15,16 @@
 		"@fortawesome/vue-fontawesome": "^3.0.3",
 		"@wagmi/core": "^1.3.8",
 		"abi-decoder": "^2.4.0",
-        "blockies": "^0.0.2",
+		"ethers": "^6.6.3",
 		"pinia": "^2.0.36",
 		"pinia-plugin-persistedstate": "^3.1.0",
 		"sass": "^1.62.1",
 		"swiper": "^9.4.1",
-        "viem": "^1.4.1",
+		"viem": "^1.5.4",
 		"vue": "^3.3.2",
-        "vue-router": "^4.2.0"
+		"vue-router": "^4.2.0",
+		"wagmi": "^1.3.9",
+		"web3": "^v1.9.0"
 	},
 	"devDependencies": {
 		"@esbuild-plugins/node-globals-polyfill": "^0.2.3",

src/App.vue

@@ -8,6 +8,7 @@ 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";
@@ -17,7 +18,6 @@ import {
 	watchAccount,
 	watchNetwork,
 	watchContractEvent,
-	watchWalletClient,
 	getAccount,
 	getNetwork,
 	getPublicClient,
@@ -28,6 +28,7 @@ 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);
@@ -37,7 +38,6 @@ const showPanel = ref(false);
 const eventWatch = ref(null);
 const netWorkEvent = ref(null);
 const memeSacrificedEvent = ref(null);
-const clientClientEvent = ref(null);
 
 isMobile.value = isMobileFunc();
 onUnmounted(() => {
@@ -45,8 +45,6 @@ onUnmounted(() => {
 
 	eventWatch.value();
 	netWorkEvent.value();
-	memeSacrificedEvent.value();
-	clientClientEvent.value();
 	console.log("unsubscribe");
 });
 const handleWindowSizeChange = () => {
@@ -66,24 +64,25 @@ function isMobileFunc() {
 	}
 }
 provide("isMobile", isMobile);
-provide("showPanel", showPanel);
 
 onMounted(async () => {
 	window.addEventListener("resize", handleWindowSizeChange);
 	handleWindowSizeChange();
 
-	await walletStore.init();
+	// initContracts
+	// await walletStore.init();
+	// await tokenStore.initV2();
+	// await memeBurnerStore.init();
+	// await rewardLockerStore.init();
+	// await memeBurnerStore.init();
+	// await multiCallStore.init();
+	//Memeburner Contract
 
-	const account = getAccount();
+	//init
-	const network = getNetwork();
+	// roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
-	console.log("netWork", network);
+	// console.log("roundsStore.currentRound", roundsStore.currentRound);
-	console.log("account", account);
+	// roundsStore.activeRound = roundsStore.currentRound;
-	if (account.address) {
+	await roundsStore.fillRound(roundsStore.activeRound);
-		walletStore.address = account.address;
-		walletStore.connected = true;
-		var walletClient123 = await getWalletClient();
-		console.log("walletClient123123123", walletClient123);
-	}
 
 	//events
 	eventWatch.value = watchAccount(async (account) => {
@@ -102,16 +101,10 @@ onMounted(async () => {
 				chainObject = chain;
 			}
 			var walletClient = await getWalletClient({
-				account: account.address,
 				chainId: chainObject.id,
 			});
 			walletStore.walletClient = walletClient;
-
-			// walletStore.getTokenBalances()
-
 			await memeBurnerStore.init();
-			console.log("hierabc");
-			await tokenStore.initV2();
 		} else {
 			walletStore.address = null;
 			walletStore.connected = false;
@@ -123,16 +116,6 @@ onMounted(async () => {
 		console.log("network123", network);
 		if (network.chain) {
 			walletStore.chain = network.chain;
-
-			clientClientEvent.value = watchWalletClient(
-				{
-					chainId: network.chain.id,
-				},
-				(walletClient) => {
-					walletStore.walletClient = walletClient;
-					console.log("wc123", walletClient);
-				}
-			);
 		}
 	});
 
@@ -148,18 +131,6 @@ onMounted(async () => {
 			await roundsStore.updateCurrentRound(token);
 		}
 	);
-
-	await tokenStore.initV2();
-	await memeBurnerStore.init();
-	await rewardLockerStore.init();
-	await memeBurnerStore.init();
-
-	// init
-	roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
-	console.log("roundsStore.currentRound", roundsStore.currentRound);
-	roundsStore.activeRound = roundsStore.currentRound;
-	await roundsStore.fillRound(roundsStore.activeRound);
-	await walletStore.loadWalletData();
 });
 </script>
 
@@ -168,35 +139,14 @@ onMounted(async () => {
 	<slideout-panel v-model="showPanel">
 		<connect-wallet></connect-wallet>
 	</slideout-panel>
-	<div class="main" :class="{ 'no-scroll': showPanel, mobile: isMobile }">
+	<div class="main">
 		<RouterView />
 	</div>
 	<div class="footer">
 		<div class="footer-inner">
-			Follow Bloodline
+			$BLOOD is 100%<br />
-			<!-- $BLOOD is 100%<br />
 			community owned.<br />
-			No team %, no pre-mine. -->
+			No team %, no pre-mine.
-			<div class="footer-social-links">
-				<div class="social-bloodline-badge">
-					<div class="social-bloodline-badge-icon">
-						<font-awesome-icon icon="fa-brands fa-discord" />
-					</div>
-					<div class="social-bloodline-badge-text">Discord</div>
-				</div>
-				<div class="social-bloodline-badge">
-					<div class="social-bloodline-badge-icon">
-						<font-awesome-icon icon="fa-brands fa-telegram" />
-					</div>
-					<div class="social-bloodline-badge-text">Telegram</div>
-				</div>
-				<div class="social-bloodline-badge">
-					<div class="social-bloodline-badge-icon">
-						<font-awesome-icon icon="fa-brands fa-twitter" />
-					</div>
-					<div class="social-bloodline-badge-text">Twitter</div>
-				</div>
-			</div>
 		</div>
 	</div>
 </template>
@@ -210,8 +160,4 @@ onMounted(async () => {
         padding: 24px
         font-size: 24px
         text-align: center
-.main
-    &.mobile
-        &.no-scroll
-            overflow: hidden
 </style>

src/assets/contracts/Multicall.json

@@ -0,0 +1,444 @@
+{
+    "contractName": "Multicall3",
+    "contractAddress": "0xcA11bde05977b3631167028862bE2a173976CA11",
+    "abi": [
+        {
+            "inputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "address",
+                            "name": "target",
+                            "type": "address"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "callData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Call[]",
+                    "name": "calls",
+                    "type": "tuple[]"
+                }
+            ],
+            "name": "aggregate",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "blockNumber",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "bytes[]",
+                    "name": "returnData",
+                    "type": "bytes[]"
+                }
+            ],
+            "stateMutability": "payable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "address",
+                            "name": "target",
+                            "type": "address"
+                        },
+                        {
+                            "internalType": "bool",
+                            "name": "allowFailure",
+                            "type": "bool"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "callData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Call3[]",
+                    "name": "calls",
+                    "type": "tuple[]"
+                }
+            ],
+            "name": "aggregate3",
+            "outputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "bool",
+                            "name": "success",
+                            "type": "bool"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "returnData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Result[]",
+                    "name": "returnData",
+                    "type": "tuple[]"
+                }
+            ],
+            "stateMutability": "payable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "address",
+                            "name": "target",
+                            "type": "address"
+                        },
+                        {
+                            "internalType": "bool",
+                            "name": "allowFailure",
+                            "type": "bool"
+                        },
+                        {
+                            "internalType": "uint256",
+                            "name": "value",
+                            "type": "uint256"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "callData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Call3Value[]",
+                    "name": "calls",
+                    "type": "tuple[]"
+                }
+            ],
+            "name": "aggregate3Value",
+            "outputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "bool",
+                            "name": "success",
+                            "type": "bool"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "returnData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Result[]",
+                    "name": "returnData",
+                    "type": "tuple[]"
+                }
+            ],
+            "stateMutability": "payable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "address",
+                            "name": "target",
+                            "type": "address"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "callData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Call[]",
+                    "name": "calls",
+                    "type": "tuple[]"
+                }
+            ],
+            "name": "blockAndAggregate",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "blockNumber",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "bytes32",
+                    "name": "blockHash",
+                    "type": "bytes32"
+                },
+                {
+                    "components": [
+                        {
+                            "internalType": "bool",
+                            "name": "success",
+                            "type": "bool"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "returnData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Result[]",
+                    "name": "returnData",
+                    "type": "tuple[]"
+                }
+            ],
+            "stateMutability": "payable",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "getBasefee",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "basefee",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "blockNumber",
+                    "type": "uint256"
+                }
+            ],
+            "name": "getBlockHash",
+            "outputs": [
+                {
+                    "internalType": "bytes32",
+                    "name": "blockHash",
+                    "type": "bytes32"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "getBlockNumber",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "blockNumber",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "getChainId",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "chainid",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "getCurrentBlockCoinbase",
+            "outputs": [
+                {
+                    "internalType": "address",
+                    "name": "coinbase",
+                    "type": "address"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "getCurrentBlockDifficulty",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "difficulty",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "getCurrentBlockGasLimit",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "gaslimit",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "getCurrentBlockTimestamp",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "timestamp",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "address",
+                    "name": "addr",
+                    "type": "address"
+                }
+            ],
+            "name": "getEthBalance",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "balance",
+                    "type": "uint256"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [],
+            "name": "getLastBlockHash",
+            "outputs": [
+                {
+                    "internalType": "bytes32",
+                    "name": "blockHash",
+                    "type": "bytes32"
+                }
+            ],
+            "stateMutability": "view",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "bool",
+                    "name": "requireSuccess",
+                    "type": "bool"
+                },
+                {
+                    "components": [
+                        {
+                            "internalType": "address",
+                            "name": "target",
+                            "type": "address"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "callData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Call[]",
+                    "name": "calls",
+                    "type": "tuple[]"
+                }
+            ],
+            "name": "tryAggregate",
+            "outputs": [
+                {
+                    "components": [
+                        {
+                            "internalType": "bool",
+                            "name": "success",
+                            "type": "bool"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "returnData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Result[]",
+                    "name": "returnData",
+                    "type": "tuple[]"
+                }
+            ],
+            "stateMutability": "payable",
+            "type": "function"
+        },
+        {
+            "inputs": [
+                {
+                    "internalType": "bool",
+                    "name": "requireSuccess",
+                    "type": "bool"
+                },
+                {
+                    "components": [
+                        {
+                            "internalType": "address",
+                            "name": "target",
+                            "type": "address"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "callData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Call[]",
+                    "name": "calls",
+                    "type": "tuple[]"
+                }
+            ],
+            "name": "tryBlockAndAggregate",
+            "outputs": [
+                {
+                    "internalType": "uint256",
+                    "name": "blockNumber",
+                    "type": "uint256"
+                },
+                {
+                    "internalType": "bytes32",
+                    "name": "blockHash",
+                    "type": "bytes32"
+                },
+                {
+                    "components": [
+                        {
+                            "internalType": "bool",
+                            "name": "success",
+                            "type": "bool"
+                        },
+                        {
+                            "internalType": "bytes",
+                            "name": "returnData",
+                            "type": "bytes"
+                        }
+                    ],
+                    "internalType": "struct Multicall3.Result[]",
+                    "name": "returnData",
+                    "type": "tuple[]"
+                }
+            ],
+            "stateMutability": "payable",
+            "type": "function"
+        }
+    ]
+}

src/assets/js/blockies.min.js

@@ -1 +0,0 @@
-!function(){function e(e){for(var o=0;o<c.length;o++)c[o]=0;for(var o=0;o<e.length;o++)c[o%4]=(c[o%4]<<5)-c[o%4]+e.charCodeAt(o)}function o(){var e=c[0]^c[0]<<11;return c[0]=c[1],c[1]=c[2],c[2]=c[3],c[3]=c[3]^c[3]>>19^e^e>>8,(c[3]>>>0)/(1<<31>>>0)}function r(){var e=Math.floor(360*o()),r=60*o()+40+"%",t=25*(o()+o()+o()+o())+"%",l="hsl("+e+","+r+","+t+")";return l}function t(e){for(var r=e,t=e,l=Math.ceil(r/2),n=r-l,a=[],c=0;t>c;c++){for(var i=[],f=0;l>f;f++)i[f]=Math.floor(2.3*o());var s=i.slice(0,n);s.reverse(),i=i.concat(s);for(var h=0;h<i.length;h++)a.push(i[h])}return a}function l(o){var t={};return t.seed=o.seed||Math.floor(Math.random()*Math.pow(10,16)).toString(16),e(t.seed),t.size=o.size||8,t.scale=o.scale||4,t.color=o.color||r(),t.bgcolor=o.bgcolor||r(),t.spotcolor=o.spotcolor||r(),t}function n(e,o){var r=t(e.size),l=Math.sqrt(r.length);o.width=o.height=e.size*e.scale;var n=o.getContext("2d");n.fillStyle=e.bgcolor,n.fillRect(0,0,o.width,o.height),n.fillStyle=e.color;for(var a=0;a<r.length;a++)if(r[a]){var c=Math.floor(a/l),i=a%l;n.fillStyle=1==r[a]?e.color:e.spotcolor,n.fillRect(i*e.scale,c*e.scale,e.scale,e.scale)}return o}function a(e){var e=l(e||{}),o=document.createElement("canvas");return n(e,o),o}var c=new Array(4),i={create:a,render:n};"undefined"!=typeof module&&(module.exports=i),"undefined"!=typeof window&&(window.blockies=i)}();

src/assets/sass/base.sass

@@ -16,8 +16,6 @@
         border: 4px solid #000
     &.purple
         border-color: var(--purple)
-    &.white
-        border-color: var(--white)
 
 .bloodline-badge
     padding: 8px 16px 8px 16px
@@ -26,8 +24,6 @@
     display: flex
     .bloodline-badge-icon
         margin-right: 8px
-    &.grey
-        background-color: var(--grey)
 
 .card
     display: block

src/assets/sass/buttons.sass

@@ -15,5 +15,3 @@
             background-color: #151515
             color: #808080
             cursor: not-allowed
-        &.black
-            background-color: var(--midnight-black)

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/assets/sass/variables.sass

@@ -29,13 +29,11 @@ $button-background-color: $black
     --tertiary: #{$tertiary}
     --tertiary-light: #{$tertiary-light}
     --tertiary-dark: #{$tertiary-dark}
-    --white: #{#F9F9FA}
     --grey: #{$grey}
     --grey2: #{$grey2}
     --purple: #{$purple}
     --blood-color: #{$red}
     --midnight-black: #{$midnight-black}
-    --black: #{$midnight-black}
     --darkgrey: #{$darkgrey}
 // :root
 //     --font-size-text: 16px

src/components/ConnectWallet.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="connect-wallet-headline">Connect Wallet</div>
+	<h3>Connect Wallet</h3>
 	<div class="connectors-wrapper" v-if="!walletStore.connected">
 		<div
 			class="connectors-element"
@@ -11,79 +11,30 @@
 			</div>
 			<div class="connector-name">{{ connector.name }}</div>
 		</div>
-		<div>
-			Are you coming from Binance, Poloniex, Kucoin or any other CEX?<br />
-			<br />
-			You don't have a wallet yet?<br /><br />
-			Follow these instructions first.
-		</div>
-	</div>
-	<div v-else>
-		<div class="connected-header">
-			<div class="connected-header-avatar">
-				<img :src="getblocky(walletStore.address)" alt="avatar" />
-			</div>
-			<div class="connected-header-address">
-				{{ getAddressShortName(walletStore.address) }}
-			</div>
-			<div class="connected-header-logout" @click="disconnectWallet">
-				<font-awesome-icon :icon="['fas', 'fa-arrow-right-from-bracket']" />
-			</div>
-		</div>
-		<div class="connected-tokens-headline">Your Tokens</div>
-		<div class="connected-tokens">
-			<div class="connected-token" v-for="token in walletStore.token">
-				<token-name-price
-					:name="tokenStore.getToken(token.contractAddress).name"
-					:price="token.balanceOf"
-				></token-name-price>
-				<div class="connected-token-button">
-					<div class="bloodline-badge grey">
-						<div class="bloodline-badge-text">Sacrifice</div>
-					</div>
-				</div>
-				<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
-			</div>
-		</div>
-		<div class="connected-stake bloodline-border white">
-			<div class="connected-stake-headline">Staked</div>
-			<div class="connected-stake-subheadline">Increase your sacrifice reward by staking.</div>
-			<div class="connected-stake-body">
-				<token-name-price
-					:name="tokenStore.getToken(walletStore.memeToken?.contractAddress).name"
-					:price="walletStore.memeToken.staked"
-				></token-name-price>
-				<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
-				<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price>
-			</div>
-			<div class="connected-stake-buttons" v-if="!stakeMenu">
-				<div class="btn btn-immortal" @click="openStake">Stake</div>
-				<div class="btn btn-immortal" @click="openUnstake">Unstake</div>
-			</div>
-			<Transition>
-				<stake-menu @close="stakeMenu = false" :stake="stake" v-if="stakeMenu"></stake-menu>
-			</Transition>
-		</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 { useTokenStore } from "@/stores/tokens";
 import Meme1Json from "@/assets/contracts/Meme1.json";
-import TokenNamePrice from "./TokenNamePrice.vue";
-import TokenLogo from "./TokenLogo.vue";
-import TokenInput from "./TokenInput.vue";
-import StakeMenu from "./StakeMenu.vue";
-import { getAddressShortName, getblocky } from "@/helper/helper.js";
 
-import { disconnect } from "@wagmi/core";
+import {
+	createConfig,
+	configureChains,
+	mainnet,
+	getAccount,
+	getContract,
+	connect,
+	disconnect,
+	InjectedConnector,
+	watchAccount,
+} from "@wagmi/core";
 
 const walletStore = useWalletStoreV2();
-const tokenStore = useTokenStore();
+
-const stakeMenu = ref(false);
-const stake = ref(null);
 const goerliKey = import.meta.env.VITE_GOERLI_KEY;
 
 const fromAddress = ref(null);
@@ -92,6 +43,41 @@ 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 {
@@ -108,30 +94,12 @@ async function connectWallet(connector) {
 	instance.parent.emit("update:modelValue", false);
 	await walletStore.connectWallet(toRaw(connector));
 }
-
-function openStake() {
-	stake.value = true;
-	stakeMenu.value = true;
-}
-
-function openUnstake() {
-	stake.value = false;
-	stakeMenu.value = true;
-}
 </script>
 
 <style lang="sass">
-.connect-wallet-headline
-    font-family: Inter
-    font-size: 18px
-    font-style: normal
-    font-weight: 400
-    line-height: normal
 .connectors-wrapper
     display: flex
     flex-direction: column
-    gap: 8px
-    margin: 24px 0
     .connectors-element
         display: flex
         padding: 12px
@@ -148,53 +116,4 @@ function openUnstake() {
         .connector-name
             padding: 0 8px
             align-self: center
-
-
-
-.connected-header
-    margin-bottom: 24px
-    display: flex
-    gap: 16px
-    align-items: center
-    .connected-header-avatar
-        img
-            border-radius: 8px
-    .connected-header-logout
-        margin-left: auto
-        svg
-            font-size: 25px
-
-.connected-tokens-headline
-    font-size: 18px
-.connected-tokens
-    .connected-token
-        display: flex
-        gap: 16px
-        padding: 16px 8px
-        align-items: center
-        .connected-token-button
-            margin-left: auto
-            .bloodline-badge
-                padding: 4px 16px
-                color: black
-                font-size: 14px
-
-.connected-stake
-    .connected-stake-headline
-        margin-bottom: 8px
-    .connected-stake-subheadline
-        margin-bottom: 16px
-    .connected-stake-body
-        display: flex
-        gap: 16px
-        margin-bottom: 16px
-        .stake-reward
-            margin-left: auto
-    .connected-stake-buttons
-        display: flex
-        text-align: center
-        gap: 16px
-        div
-            flex: 1 1 50%
-            font-size: 18px
 </style>

src/components/Navbar.vue

@@ -2,14 +2,13 @@
 import { storeToRefs } from "pinia";
 import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 import { useWalletStoreV2 } from "@/stores/walletV2";
-import { getblocky } from "@/helper/helper.js";
-
 const emit = defineEmits(["showPanel"]);
 
 const walletStore = useWalletStoreV2();
 const { connected, address } = storeToRefs(walletStore);
 const isMobile = inject("isMobile");
-const showPanel = inject("showPanel");
+
+const showPanel = ref(false);
 
 const showNavbar = ref(true);
 const lastScrollPosition = ref(0);
@@ -41,7 +40,9 @@ onBeforeUnmount(() => {
 						<img alt="logo" class="logo" src="/assets/img/vampir.png" />
 					</router-link>
 				</div>
-				<div class="navbar-text">Bloodline</div>
+				<div class="navbar-text">
+					<router-link to="/">Bloodline</router-link>
+				</div>
 				<div class="navbar-center" v-if="!isMobile">
 					<div class="navbar-social-links">
 						<div class="social-bloodline-badge">
@@ -67,14 +68,11 @@ onBeforeUnmount(() => {
 				<div class="navbar-end">
 					<div v-if="!isMobile">
 						<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
-						<div v-if="!address" class="btn btn-immortal" @click="showPanel = true">connect</div>
+						<div v-if="!address" class="btn btn-immortal" @click="$emit('showPanel', true)">connect</div>
-						<span v-else @click="showPanel = true"> test</span>
+						<span v-else @click="$emit('showPanel', true)"> {{ address }}</span>
 					</div>
-					<div v-else @click="showPanel = true">
+					<div v-else class="hamburger-menu">
-						<div class="login-icon" v-if="!address">
+						<font-awesome-icon :icon="['fas', 'bars']" />
-							<font-awesome-icon :icon="['fas', 'fa-arrow-right-to-bracket']" />
-						</div>
-						<div v-else><img :src="getblocky(address)" alt="avatar" /></div>
 					</div>
 				</div>
 			</div>
@@ -95,8 +93,8 @@ header
         height: 82px
         @media (min-width: 992px)
             height: 128px
-        // &.navbar--hidden
+        &.navbar--hidden
-        //     transform: translate3d(0,-100%,0)
+            transform: translate3d(0,-100%,0)
         .navbar-inner
             display: flex
             padding: 16px 24px
@@ -117,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
@@ -137,19 +138,7 @@ header
             .navbar-end
                 display: flex
                 margin-left: auto
-                .login-icon
+                .hamburger-menu
-                    color: var(--white)
+                    color: var(--purple)
-                    background-color: var(--purple)
+                    font-size: 42px
-                    padding: 8px
-                    font-size: 25px
-                    border-radius: 8px
-                    width: 44px
-                    height: 44px
-                    display: flex
-                    justify-content: center
-                    align-items: center
-                img
-                    width: 32px
-                    height: 32px
-                    border-radius: 8px
 </style>

src/components/SacrificeToken.vue

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

src/components/SlideoutPanel.vue

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

src/components/StakeMenu.vue

@@ -1,91 +0,0 @@
-<template>
-	<div>
-		<token-input v-model="tokenNumber">
-			<template v-slot:message>
-				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(25)">25%</div>
-				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50)">50%</div>
-				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75)">75%</div>
-				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(100)">100%</div>
-			</template>
-		</token-input>
-		<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
-		<div class="btn btn-immortal stake-button" @click="stakeBloodline" v-if="props.stake">Stake</div>
-		<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake</div>
-		<div class="btn btn-immortal black cancel-button" @click="emit('close')">Cancel</div>
-	</div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-import TokenInput from "./TokenInput.vue";
-import { useWalletStoreV2 } from "@/stores/walletV2";
-import { useRewardLockerStore } from "@/stores/rewardlocker";
-import { useTokenStore } from "@/stores/tokens";
-import { createPermitObject, getSignatureRSV } from "@/helper/blockchain.js";
-
-import { signTypedData } from "@wagmi/core";
-
-const walletStore = useWalletStoreV2();
-const rewardLockerStore = useRewardLockerStore();
-const tokenStore = useTokenStore();
-
-const props = defineProps({
-	stake: Boolean,
-});
-
-const emit = defineEmits(["close"]);
-
-const tokenNumber = ref(null);
-async function addTokensPercent(value) {
-	let amount;
-	if (props.stake) {
-		amount = (walletStore.memeToken.balanceOf * value) / 100;
-	} else {
-		amount = (walletStore.memeToken.staked * value) / 100;
-	}
-	tokenNumber.value = amount;
-}
-
-async function unstakeBloodline() {
-	alert("todo");
-}
-
-async function stakeBloodline() {
-	const fromAddress = walletStore.address;
-	const spender = rewardLockerStore.config.contractAddress;
-	const deadline = Date.now() + 20 * 60;
-	const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
-	const value = (tokenNumber.value * Math.pow(10, decimals)).toString();
-	const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
-	console.log("nonce", nonce);
-	const { types, message, domain, primaryType } = createPermitObject(fromAddress, spender, nonce, deadline, value);
-
-	const signature = await signTypedData({
-		domain: domain,
-		message: message,
-		primaryType: primaryType,
-		types: types,
-	});
-
-	const { r, s, v } = getSignatureRSV(signature);
-
-	var resultStake = await rewardLockerStore.contract.write.stakeToBeSecured([value, deadline, v, r, s]);
-
-	console.log("resultStake", resultStake);
-}
-</script>
-
-<style lang="sass">
-.btn
-    &.btn-immortal
-        &.cancel-button
-            font-size: 14px
-            text-align: center
-        &.stake-button
-            font-size: 18px
-            text-align: center
-.input-balance
-    margin: 8px 0
-    color: var(--grey, #858585)
-</style>

src/components/TokenClaim.vue

@@ -18,7 +18,12 @@
 			/>
 		</div>
 		<div class="rewards-list" v-else>
-			<rewards-wrapper title="Total Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
+			<rewards-wrapper
+				title="Total Sacrafice Reward"
+				coin="$BLOOD"
+				amount="0"
+				image="/assets/img/vampir.png"
+			/>
 			<rewards-wrapper
 				title="Total Stake Reward"
 				coin="$BLOOD"
@@ -39,6 +44,7 @@
         <div class="stake-buttons">
 			<div class="btn btn-immortal">Stake</div>
 			<div class="btn btn-immortal">Unstake</div>
+
         </div>
 	</div>
 </template>
@@ -48,16 +54,17 @@ import { storeToRefs } from "pinia";
 import RewardsWrapper from "@/components/RewardsWrapper.vue";
 import { inject, ref, onMounted } from "vue";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
-import { useWalletStoreV2 } from "@/stores/walletV2";
+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 = useWalletStoreV2();
+const walletStore = useWalletStore();
 const roundStore = useRoundsStore();
 const { address } = storeToRefs(walletStore);
-const { activeRound, currentRound, getCurrentRoundData } = storeToRefs(roundStore);
+const { activeRound, currentRound, getCurrentRoundData } =
+	storeToRefs(roundStore);
 
 onMounted(async () => {});
 

src/components/TokenInput.vue

@@ -1,53 +0,0 @@
-<template>
-	<div class="token-input">
-		<div class="sarcrifice-from-input">
-			<input
-				@input="emit('update:modelValue', $event.target.value)"
-				v-model="props.modelValue"
-				:placeholder="0"
-			/>
-			<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
-		</div>
-		<div class="value-adder">
-			<slot class="value-adder" name="message"></slot>
-		</div>
-	</div>
-</template>
-
-<script setup>
-const props = defineProps({
-	modelValue: Number,
-});
-
-const emit = defineEmits(["update:modelValue"]);
-</script>
-
-<style lang="sass">
-.sarcrifice-from-input
-    display: flex
-    margin-bottom: 8px
-    // height: 60px
-    input
-        width: 100%
-        height: 45px
-        font-size: 24px
-        border-radius: 16px
-        padding: 0 16px
-        @media (min-width: 992px)
-            font-size: 32px
-            height: auto
-.value-adder
-    display: flex
-    gap: 8px
-    .stake-adder-step
-        padding: 4px 16px
-        color: var(--black)
-        font-size: 14px
-        border-width: 1px
-        border-color: transparent
-        border-style: solid
-        &:hover,&:active, &:focus
-            color: var(--white)
-            border-color: var(--white)
-            background-color: var(--black)
-</style>

src/components/TokenLogo.vue

@@ -1,24 +0,0 @@
-<template>
-	<div class="token-logo">
-		<img :src="props.img" :alt="props.alt" />
-	</div>
-</template>
-
-<script setup>
-const props = defineProps({
-	img: String,
-	alt: Number,
-});
-</script>
-
-<style lang="sass">
-.token-logo
-    img
-        width: 45px
-        height: 45px
-        border-radius: 50%
-        pointer-events: none
-        @media (min-width: 992px)
-            height: 83px
-            width: auto
-</style>

src/components/TokenNamePrice.vue

@@ -1,23 +0,0 @@
-<template>
-	<div class="token-price-wrapper">
-		<div class="token-name">{{ props.name }}</div>
-		<div class="token-price">{{ props.price }}</div>
-	</div>
-</template>
-
-<script setup>
-const props = defineProps({
-	name: String,
-	price: Number,
-});
-</script>
-
-<style lang="sass">
-.token-price-wrapper
-    .token-name
-        font-size: 14px
-        margin-bottom: 4px
-    .token-price
-        font-size: 24px
-        letter-spacing: 4.32px
-</style>

src/helper/blockchain.js

@@ -1,72 +0,0 @@
-import { useTokenStore } from "@/stores/tokens";
-
-export function createPermitObject(fromAddress, spender, nonce, deadline, value) {
-    const tokenStore = useTokenStore();
-
-    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 primaryType = "Permit";
-
-    const types =  {
-        EIP712Domain: domainType,
-        Permit: [
-            {
-                name: "owner",
-                type: "address",
-            },
-            {
-                name: "spender",
-                type: "address",
-            },
-            {
-                name: "value",
-                type: "uint256",
-            },
-            {
-                name: "nonce",
-                type: "uint256",
-            },
-            {
-                name: "deadline",
-                type: "uint256",
-            },
-        ],
-    }
-    
-    const domain = {
-		name: "Bloodline",
-		version: "1",
-		chainId: 5,
-		verifyingContract: tokenStore.memeToken.contractAddress,
-	};
-    
-    return {
-            types,
-			message,
-			domain,
-            primaryType,
-		};
-}
-
-export function getSignatureRSV(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 };
-};

src/helper/helper.js

@@ -17,22 +17,3 @@ export function compactNumber(number) {
 		maximumFractionDigits: 2,
 	}).format(parseInt(number));
 }
-
-export function getAddressShortName(address) {
-    // const address = "0x66422602B2f4885c57EE794174f98d9E4DDBBBC6";
-    const addressBegin = address.substring(0, 6);
-    const addressEnd = address.substring(address.length - 4, address.length)
-    return addressBegin + "..." + addressEnd;
-}
-
-export function getblocky(address) {
-	var blockiesData = blockies
-		.create({
-			seed: address.toLowerCase(),
-			size: 8,
-			scale: 4,
-		})
-		.toDataURL();
-
-	return blockiesData;
-}

src/main.js

@@ -14,12 +14,14 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
-import { faArrowDown, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faArrowRightToBracket, faArrowRightFromBracket } 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,
+    faArrowRight,
 	faDiscord,
 	faTwitter,
 	faTelegram,
@@ -29,8 +31,8 @@ library.add(
 	faCaretRight,
 	faBars,
 	faAnglesRight,
-    faArrowRightToBracket,
+	faChevronDown,
-    faArrowRightFromBracket
+	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),
@@ -27,7 +38,43 @@ const router = createRouter({
 			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

@@ -1,10 +1,12 @@
 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, getWalletClient } from "@wagmi/core";
+import { multicall, getContract, fetchToken, waitForTransaction } from "@wagmi/core";
 
 
 export const useMemeburnerStore = defineStore("memeburner", {
@@ -20,12 +22,28 @@ export const useMemeburnerStore = defineStore("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();
@@ -53,8 +71,8 @@ export const useMemeburnerStore = defineStore("memeburner", {
 			console.log("getSacrificedRound", roundnumber);
 			const tokenStore = useTokenStore();
 			const contracts = [];
-			for (let index = 0; index < tokenStore.sacrificeToken.length; index++) {
+			for (let index = 0; index < tokenStore.token.length; index++) {
-				const token = tokenStore.sacrificeToken[index];
+				const token = tokenStore.token[index];
 				console.log("token.contractAddress", token.contractAddress);
 				console.log("roundnumber", roundnumber);
 				// contracts.push(this.contract.methods.getSacrificedMeme(roundnumber, token.contractAddress));
@@ -69,6 +87,7 @@ export const useMemeburnerStore = defineStore("memeburner", {
             return data;
 		},
 		async sacrificeMeme(amount) {
+			const walletStore = useWalletStore();
 			const tokenStore = useTokenStore();
 			try {
 				if (!amount || amount == 0) {
@@ -79,7 +98,6 @@ export const useMemeburnerStore = defineStore("memeburner", {
 				this.loading = true;
 				const amountDecimal = BigInt(amount * Math.pow(10, tokenStore.activeToken.decimals));
                 console.log("this.contract", this.contract);
-                console.log("amountDecimal", amountDecimal);
 				var hash = await this.contract.write
 					.sacrificeMeme([tokenStore.activeToken.contractAddress, amountDecimal])
                 console.log("hash", hash);

src/stores/multicall.js

@@ -0,0 +1,49 @@
+import { defineStore } from "pinia";
+import MulticallJson from "@/assets/contracts/Multicall.json";
+import { useWalletStore } from "./wallet";
+
+
+export const useMultiCallStore = defineStore("multicall", {
+    state: () => ({
+        config: MulticallJson,
+        contract: null,
+    }),
+    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();
+				return {
+					target: call._parent._address,
+					callData,
+				};
+            });
+            
+            const { returnData } = await this.contract.methods.aggregate(callRequests).call(parameters);
+
+            return returnData.map((hex, index) => {
+				const types = calls[index]._method.outputs.map((o) =>
+					o.internalType !== o.type && o.internalType !== undefined ? o : o.type
+				);
+                const walletStore = useWalletStore();
+
+				let result = walletStore.web3.eth.abi.decodeParameters(types, hex);
+
+				delete result.__length__;
+
+				result = Object.values(result);
+				return result.length === 1 ? result[0] : result;
+			});
+        }
+    }
+}
+);

src/stores/rewardlocker.js

@@ -1,7 +1,10 @@
 import { defineStore } from "pinia";
 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";
 
 
@@ -21,6 +24,7 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 				abi: this.config.abi,
 				walletClient: walletStore.walletClient || walletStore.publicClient,
 			});
+            // this.contract = new walletStore.web3.eth.Contract(this.config.abi, this.config.contractAddress);
 		},
 		/*
 		 * @param {*} walletAddress
@@ -36,8 +40,8 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			const tokenStore = useTokenStore();
 			const walletStore = useWalletStoreV2();
 			const contracts = [];
-			for (let index = 0; index < tokenStore.sacrificeToken.length; index++) {
+			for (let index = 0; index < tokenStore.token.length; index++) {
-                const token = tokenStore.sacrificeToken[index];
+                const token = tokenStore.token[index];
 				// calls.push(this.contract.methods.rewards(walletStore.address, roundNumber, token.contractAddress));
 				contracts.push({
 					...this.contract,
@@ -58,7 +62,6 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			return await this.contract.read.lastCompletedRound();
 		},
         async claim(round) {
-            console.log("claim");
 			const walletStore = useWalletStoreV2();
 			// return await this.contract.methods.claim(round).call();
             console.log(this.contract.methods.claim(round));
@@ -68,8 +71,5 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		async getTotalRewardsOf(address, rounds) {
 			return await this.contract.read.getTotalRewardsOf([address, rounds]);
 		},
-		async getStaked(address) {
-			return await this.contract.read.staked([address]);
-		},
 	},
 });

src/stores/rounds.js

@@ -2,7 +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", {
@@ -21,6 +23,37 @@ export const useRoundsStore = defineStore("rounds", {
         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();
@@ -30,7 +63,7 @@ export const useRoundsStore = defineStore("rounds", {
             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();
@@ -40,18 +73,17 @@ export const useRoundsStore = defineStore("rounds", {
             // 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");
                 console.log("vor error");
-                    var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
+                var data = await memeBurnerStore.getSacrificedRound(roundNumber)
-                    console.log("databla", data);
                 let rewardData = null;
                 if (walletStore.connected) {
-						rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
+                    rewardData = await rewardLockerStore.getRewardsForAllToken(roundNumber);
                 } 
                 console.log("rewardData123", rewardData);
                 
-                    var goal = await memeBurnerStore.getGoal(this.activeRound);
+                var goal = await memeBurnerStore.getGoal(roundNumber);
                 console.log("goal", goal);
                 var tokenArray = []
                 var rewards_clan = 0
@@ -59,7 +91,7 @@ export const useRoundsStore = defineStore("rounds", {
                 for (let index = 0; index < data.length; index++) {
                     var tokenData = {};
                     const token = tokenStore.token[index];
-                    var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(this.activeRound, token.contractAddress);
+                    var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(roundNumber, token.contractAddress);
                     
                     
 
@@ -69,7 +101,7 @@ export const useRoundsStore = defineStore("rounds", {
                     tokenData.vampname = token.vamp.name;
                     tokenData.amount = data[index].result[1];
                     tokenData.getAmountToReachGoal= await memeBurnerStore.getAmountToReachGoal(token.contractAddress);
-                    if (this.currentRound !== this.activeRound && walletStore.connected) {
+                    if (this.currentRound !== roundNumber && walletStore.connected) {
                         const clanwin = (Number(testcoef) / 10000 - 1) * Number(rewardData[index].result);
                         const sacrificeRewards = Number(rewardData[index].result) - clanwin;
 
@@ -83,10 +115,8 @@ export const useRoundsStore = defineStore("rounds", {
                     }
                     tokenArray.push(tokenData);
                 }
-                    const goalInBLD = await memeBurnerStore.getGoalInBLD(this.activeRound);
+                const goalInBLD = await memeBurnerStore.getGoalInBLD(roundNumber);
-                    console.log("goalInBLD", goalInBLD);
+                this.rounds[roundNumber] = {
-                    console.log("tokenStore.memeToken.decimals", tokenStore.memeToken.decimals);
-                this.rounds[this.activeRound] = {
                     goal: goal[0],
                     goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
                     expirationTimestamp: goal[1],
@@ -95,7 +125,7 @@ export const useRoundsStore = defineStore("rounds", {
                     rewards_total: BigInt(rewards_clan + rewards_sacrifice),
                     token: tokenArray,
                 };
-                    console.log("this.rounds[this.activeRound]", this.rounds[this.activeRound]);
+                console.log("this.rounds[roundNumber]", this.rounds[roundNumber]);
             } else {
                 console.log("round already filled");
             }

src/stores/tokens.js

@@ -1,13 +1,16 @@
 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, getWalletClient, waitForTransaction } from "@wagmi/core";
+import { multicall, getContract, fetchToken } from "@wagmi/core";
 
 
 export const useTokenStore = defineStore("token", {
@@ -24,6 +27,7 @@ export const useTokenStore = defineStore("token", {
 				backgroundColor: "#4b8501",
 				abi: Meme1Json.abi,
 				contractAddress: Meme1Json.contractAddress,
+                ethcontract: null,
 			},
 			{
 				name: "$SHIB",
@@ -36,11 +40,6 @@ export const useTokenStore = defineStore("token", {
 				abi: Meme2Json.abi,
 				contractAddress: Meme2Json.contractAddress,
 			},
-			{
-				abi: MemeToken.abi,
-				contractAddress: MemeToken.contractAddress,
-				logo: "/assets/img/token/bloodline.png",
-			},
 			// {
 			// 	name: "$ELON",
 			// 	logo: "/assets/img/token/elon.png",
@@ -61,76 +60,58 @@ export const useTokenStore = defineStore("token", {
 			allowance: null,
 		},
 		loading: false,
-		// memeToken: getTpelm
+		memeToken: {
+			config: {
+				abi: MemeToken.abi,
+				contractAddress: MemeToken.contractAddress,
+			},
+		},
 	}),
-	getters: {
+	getters: {},
-		memeToken: (state) => state.token.find((obj) => obj.contractAddress === MemeToken.contractAddress),
-		sacrificeToken: (state) => state.token.filter((obj) => obj.contractAddress !== MemeToken.contractAddress),
-	},
 	actions: {
-		getToken(address) {
-			console.log("address", address);
-			const token = this.token.find((obj) => obj.contractAddress === address);
-			return token;
-		},
 		async initV2() {
             console.log("-----------init token-------------");
+            const contracts = [];
             const walletStore = useWalletStoreV2();
 			for (let index = 0; index < this.token.length; index++) {
-				const contracts = [];
 				const token = this.token[index];
-				console.log("token123abc", token);
                 token.contract = getContract({
 					address: token.contractAddress,
 					abi: token.abi,
-					walletClient: walletStore.walletClient || walletStore.publicClient,
+					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" });
+
 
-				contracts.push({ ...token.contract, functionName: "decimals" });
-				contracts.push({ ...token.contract, functionName: "name" });
-				contracts.push({ ...token.contract, functionName: "symbol" });
-				contracts.push({ ...token.contract, functionName: "totalSupply" });
              const data = await multicall({
 					contracts,
              });
-				token.decimals = data[0].result;
+            //multicall decimal
-				token.name = data[1].result;
+            for (let index = 0; index < this.token.length; index++) {
-				token.symbol = data[2].result;
+                const token = this.token[index];
-				token.totalSupply = data[3].result;
+                token.decimals = data[index].result
             }
 
-			// MemeToken init
+            this.memeToken.decimals = data[this.token.length].result;
-			// this.memeToken.contract = getContract({
-			// 	address: this.memeToken.config.contractAddress,
-			// 	abi: this.memeToken.config.abi,
-			// 	walletClient: walletStore.walletClient || walletStore.publicClient,
-			// });
-			// const contracts = [];
-			// contracts.push({ ...this.memeToken.contract, functionName: "decimals" });
-			// contracts.push({ ...this.memeToken.contract, functionName: "name" });
-			// contracts.push({ ...this.memeToken.contract, functionName: "symbol" });
-			// contracts.push({ ...this.memeToken.contract, functionName: "totalSupply" });
             
-			// const data = await multicall({
-			// 	contracts,
-			// });
-			// this.memeToken.decimals = data[0].result;
-			// this.memeToken.name = data[1].result;
-			// this.memeToken.symbol = data[2].result;
-			// this.memeToken.totalSupply = data[3].result;
-			//     contracts.push({ ...this.memeToken.contract, functionName: "decimals" });
-
-			// //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 = useWalletStoreV2();
             if (walletStore.connected) {
                 //TODO, wenn connected, dann all diese Daten laden?
@@ -161,28 +142,32 @@ export const useTokenStore = defineStore("token", {
 		async approveToken(amount) {
 			try {
 				this.loading = true;
+				const walletStore = useWalletStore();
 				const memeBurnerStore = useMemeburnerStore();
-				// var approve = await this.contract.methods
+				var approve = await this.contract.methods
-				// 	.approve(memeBurnerStore.config.contractAddress, amount)
+					.approve(memeBurnerStore.config.contractAddress, amount)
-				// 	.send({ from: walletStore.address});
+					.send({ from: walletStore.address});
-				console.log("approve");
+				//todo parameter value übergeben in eth web3.utils.toHex(web3.utils.toWei(amount, 'ether'))
-				var approveHash = await this.activeToken.contract.write.approve([
-					memeBurnerStore.config.contractAddress,
-					amount,
-				]);
 
-				const data = await waitForTransaction({
+				// .send({ from: walletStore.address, value: 0.5 });
-					hash: approveHash,
+				this.activeToken.allowance = await this.allowance();
-				});
+				return approve;
-				return data;
 			} catch (error) {
 				console.error(error);
 			} finally {
 				this.loading = false;
 			}
 		},
-		async nonces(userAddress) {
+		getTokenContract(token) {
-			return this.memeToken.contract.read.nonces([userAddress]);
+			console.log("token", token);
+			const contractAddress = token.contractAddress;
+			const activeToken = this.token.find((obj) => obj.contractAddress === contractAddress);
+			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

@@ -0,0 +1,119 @@
+import { defineStore } from "pinia";
+import { markRaw } from "vue";
+import { useTokenStore } from "./tokens";
+import Web3 from "web3";
+export const useWalletStore = defineStore("wallet", {
+	state: () => ({
+		count: 0,
+		alchemy: null,
+		connected: false,
+        address: null,
+        web3: null,
+        provider: null
+	}),
+	getters: {
+	},
+    actions: {
+        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() {
+			window.ethereum
+				.request({ method: "eth_requestAccounts" })
+				.then((data) => {
+                    console.log("data", data);
+                    this.address = data[0];
+                    this.connected = true;
+                    this.init();
+				})
+				.catch((error) => {
+					if (error.code === 4001) {
+						// EIP-1193 userRejectedRequest error
+						console.log("Please connect to MetaMask.");
+					} else {
+						console.error(error);
+					}
+				});
+			// }
+		},
+        async getTokenBalance(token) {
+            const tokenStore = useTokenStore();
+            const contract = tokenStore.getTokenContract(token);
+			const result = await contract.methods.balanceOf(this.address).call();
+			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/stores/walletV2.js

@@ -1,28 +1,24 @@
 import { defineStore } from "pinia";
 import { markRaw } from "vue";
 import { useTokenStore } from "./tokens";
-import { useRewardLockerStore } from "./rewardlocker";
-import MemeToken from "@/assets/contracts/MemeToken.json";
 
 import {
 	createConfig,
 	configureChains,
+	mainnet,
 	getAccount,
 	getContract,
 	connect,
 	disconnect,
 	InjectedConnector,
 	watchAccount,
-	getWalletClient,
-	fetchBalance,
-	multicall,
 } 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, mainnet } from "@wagmi/core/chains";
+import { goerli } from "@wagmi/core/chains";
 import { publicProvider } from "@wagmi/core/providers/public";
 import { alchemyProvider } from "@wagmi/core/providers/alchemy";
 
@@ -33,29 +29,28 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 		alchemy: null,
 		connected: false,
 		address: null,
+		web3: null,
         provider: null,
         client: null,
         publicClient: null,
         walletClient: null,
         config: null,
         chain: null,
-		token: [],
 	}),
-	getters: {
+	getters: {},
-		sacrificeToken: (state) => state.token.filter((obj) => obj.contractAddress !== MemeToken.contractAddress),
-		memeToken: (state) => state.token.find((obj) => obj.contractAddress === MemeToken.contractAddress),
-	},
     actions: {
         async init() {
+            
             console.log("wallet init");
             const goerliKey = import.meta.env.VITE_GOERLI_KEY;
             const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
             
 			const { chains, publicClient, webSocketPublicClient } = configureChains(
-				[goerli, mainnet],
+				[goerli],
 				[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
             );
 
+            
 			this.config = createConfig({
 				autoConnect: true,
 				connectors: [
@@ -85,10 +80,47 @@ export const useWalletStoreV2 = defineStore("walletV2", {
             });
             this.publicClient = publicClient;
 
-			console.log("this.config", this.config);
+            console.log("hier123");
-			const walletClient = await getWalletClient();
+             const account = getAccount();
-			console.log("walletClient", walletClient);
+
+				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) {
@@ -96,53 +128,52 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				chainId: goerli.id,
 				connector: connector,
             });
-
-			console.log("connection", connection);
             // this.address = connection.account;
 		},
 		async getTokenBalance(token) {
-			console.log("token", token);
+			// const tokenStore = useTokenStore();
-			console.log("address", this.address);
+			// 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() {
-		async getTokenBalances() {
+		// 	try {
-			console.log("getTokenBalances");
+		// 		this.loading = true;
-			const tokenStore = useTokenStore();
+		// 		if (!window.ethereum) {
-			console.log("tokenStore.token.length", tokenStore.token.length);
+		// 			console.warn("Metamask not installed"), (this.connected = false);
-			var contracts = [];
+		// 			return;
-			for (let index = 0; index < tokenStore.token.length; index++) {
+		// 		}
-				const token = tokenStore.token[index];
+		// 		const accounts = await window.ethereum.request({ method: "eth_accounts" });
-				contracts.push({ ...token.contract, functionName: "balanceOf", args: [this.address] });
+		// 		if (accounts.length) {
-			}
+		// 			this.connected = true;
-
+		// 			this.address = accounts[0];
-			const data = await multicall({
+		// 			console.log(`You're connected to: ${accounts[0]}`);
-				contracts,
+		// 			// const web3 = new Web3(window.ethereum);
-			});
+		// 			// const tokenStore = useTokenStore();
-			console.log("data", data);
+		// 			// console.log("tokenStore.activeToken", tokenStore.activeToken);
-			for (let index = 0; index < tokenStore.token.length; index++) {
+		// 			// if (tokenStore.activeToken.contractAddress) {
-				const token = tokenStore.token[index];
+		// 			// 	tokenStore.activeToken.balance = await this.getTokenBalance(
-				const balanceOfDecimal = data[index].result / BigInt(Math.pow(10, token.decimals));
+		// 			// 		tokenStore.activeToken
-				this.token.push({
+		// 			// 	);
-					contractAddress: token.contractAddress,
+		// 			// 	tokenStore.activeToken.allowance = await tokenStore.allowance();
-					balanceOf: Number(balanceOfDecimal),
+		// 			// }
-				});
+		// 			// tokenStore.memeBurner.contract = new web3.eth.Contract(
-			}
+		// 			// 	tokenStore.memeBurner.config.abi,
-        },
+		// 			// 	tokenStore.memeBurner.config.contractAddress
-        async loadWalletData() {
+		// 			// );
-			const rewardlockerStore = useRewardLockerStore();
+		// 		} else {
-
+		// 			console.log("Metamask is not connected");
-	        await this.getTokenBalances();
+		// 			this.connected = false;
-            
+		// 		}
-            //MemeToken Staked
+		// 	} catch (error) {
-            const tokenStore = useTokenStore();
+		// 		console.log("error", error);
-            
+		// 	} finally {
-            const staked = await rewardlockerStore.getStaked(this.address);
+		// 		this.loading = false;
-            
+		// 		return this.connected;
-            this.memeToken.staked = Number(staked / BigInt(Math.pow(10, tokenStore.memeToken.decimals)));
+		// 	}
-
+		// },
-        }
 	},
 	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

@@ -4,11 +4,13 @@ import { storeToRefs } from "pinia";
 import SacrificeToken from "@/components/SacrificeToken.vue";
 import BloodChart from "@/components/BloodChart.vue";
 import TokenClaim from "@/components/TokenClaim.vue";
+// import Web3 from "web3";
 // import { useWalletStore } from "@/stores/wallet";
 import { useTokenStore } from "@/stores/tokens";
 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);
@@ -17,6 +19,7 @@ const days = ref(null);
 const hours = ref(null);
 const minutes = ref(null);
 const seconds = ref(null);
+const openTutorial = ref(false);
 const timer = ref(null);
 const modules = [Navigation];
 const isMobile = inject("isMobile");
@@ -24,14 +27,14 @@ const isMobile = inject("isMobile");
 async function prevSlide() {
 	if (activeRound.value > 1) {
 		activeRound.value--;
-		await roundsStore.fillRound();
+		await roundsStore.fillRound(activeRound.value);
 	}
 }
 
 async function nextSlide() {
 	if (activeRound.value < currentRound.value) {
 		activeRound.value++;
-		await roundsStore.fillRound();
+		await roundsStore.fillRound(activeRound.value);
 	}
 }
 
@@ -83,13 +86,13 @@ function timeBetweenDates() {
 				</div>
 			</section>
 			<section id="sacrifice" class="container">
-				<sacrifice-token :data="tokenStore.sacrificeToken"></sacrifice-token>
+				<sacrifice-token :data="token"></sacrifice-token>
 			</section>
 
 			<div class="container section-header-container">
-				<h3>Cycle</h3>
+				<h3>Bloodline Cycle</h3>
-				Become the most powerful clan each cycle and claim extra rewards.Claim and trade your $BLOOD at each
+				Become the most powerful clan each cycle and claim extra rewards.<br />Claim and trade your $BLOOD at
-				cycle's end.
+				each cycle's end.
 			</div>
 			<section id="cycle-section" class="container">
 				<div class="slider-wrapper">
@@ -168,18 +171,31 @@ function timeBetweenDates() {
 				</div>
 			</section>
 			<div class="container section-header-container">
-				<h3>Tutorial</h3>
+				<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">
-					<h3>Tokenomics</h3>
+							<h2>Tokenomics</h2>
 							<p>100% clan owned. No team %, no pre-mine</p>
 							<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
 							<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
 						</div>
 					</section>
+					<div>
+						$BLOOD is 100%<br />
+						community owned.<br />
+						No team %, no pre-mine.
+					</div>
+				</div>
+			</div>
 		</div>
 	</main>
 </template>
@@ -261,13 +277,6 @@ function timeBetweenDates() {
     justify-content: center
     font-size: 24px
     user-select: none
-    position: sticky
-    top: 82px
-    z-index: 3
-    background: #2D2D2D
-    padding: 16px 0
-    @media (min-width: 992px)
-        position: unset
     .slider-text
         margin: 0 24px
         margin-top: auto
@@ -284,12 +293,20 @@ function timeBetweenDates() {
 
 .section-header-container
     text-align: center
-    font-size: 16px
+    font-size: 24px
-    padding: 0 24px
     margin-top: 64px
     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

@@ -7,27 +7,20 @@
 		<button @click="tokenStore.approveToken(MemeBurnerJson, 10)">wallet approve</button>
 		<button @click="stake">stake</button>
 		<button @click="">unstake</button>
-		<button @click="fetchBalance">fetchBalance</button>
 	</div>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
+import Web3 from "web3";
 import Meme1Json from "@/assets/contracts/Meme1.json";
 import Meme2Json from "@/assets/contracts/Meme2.json";
 import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
 import MemeTokenJson from "@/assets/contracts/MemeToken.json";
 import RewardLockerJson from "@/assets/contracts/RewardLocker.json";
 import { useTokenStore } from "@/stores/tokens";
-import { useWalletStoreV2 } from "@/stores/walletV2";
-import { useRewardLockerStore } from "@/stores/rewardlocker";
-import { useMemeburnerStore } from "@/stores/memeburner";
-import { signTypedData } from "@wagmi/core";
 
 const tokenStore = useTokenStore();
-const walletV2Store = useWalletStoreV2();
-const rewardLockerStore = useRewardLockerStore();
-const memeBurnerStore = useMemeburnerStore();
 
 console.log("Meme1Json", Meme1Json);
 console.log("Meme2Json", Meme2Json);
@@ -35,6 +28,11 @@ console.log("MemeBurnerJson", MemeBurnerJson);
 console.log("MemeTokenJson", MemeTokenJson);
 console.log("RewardLockerJson", RewardLockerJson);
 
+// let web3 = new Web3(
+//     "https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
+// );
+// console.log("balanceOf", balanceOf);
+const web3 = ref(null);
 const contractMeme2 = ref(null);
 const contractMeme1 = ref(null);
 const contractBurner = ref(null);
@@ -42,23 +40,55 @@ const contractBloodline = ref(null);
 const rewardlocker = ref(null);
 
 onMounted(async () => {
-	// web3.value = new Web3(window.ethereum);
+	web3.value = new Web3(window.ethereum);
-	// // const contract = new web3.value.eth.Contract(Meme1Json.abi, Meme1Json.contractAddress);
+	// const contract = new web3.value.eth.Contract(Meme1Json.abi, Meme1Json.contractAddress);
-	// console.log("web3", web3.value);
+	console.log("web3", web3.value);
-	// const accounts = await web3.value.eth.getAccounts();
+	const accounts = await web3.value.eth.getAccounts();
-	// console.log("accounts", accounts);
+	console.log("accounts", accounts);
-	// web3.value.eth.Contract.defaultAccount = accounts[0];
+	web3.value.eth.Contract.defaultAccount = accounts[0];
-	// rewardlocker.value = new web3.value.eth.Contract(
+
-	// 	RewardLockerJson.abi,
+	contractMeme1.value = new web3.value.eth.Contract(
-	// 	RewardLockerJson.contractAddress
+		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() {
+	var approve = await contractMeme1.value.methods
+		.approve(MemeBurnerJson.contractAddress, 10)
+		.send({ from: web3.value.eth.Contract.defaultAccount });
+	console.log("approve", approve);
+}
+
+// async function approveMeme2() {
+//     var approve = await contractMeme1.value.methods.approve(web3.value.eth.Contract.defaultAccount, 10).send({ from: web3.value.eth.Contract.defaultAccount })
+//     console.log("approve", approve);
+// }
+
+
 // change this value to make yourself rich quick
 async function mintToken() {
 	try {
-		var mint = await tokenStore.token[0].contract.write.mint(["100000000000000000000000"]);
+		var mint = await contractMeme1.value.methods
-		// .send({ from: web3.value.eth.Contract.defaultAccount });
+			.mint("100000000000000000000000")
+			.send({ from: web3.value.eth.Contract.defaultAccount });
 		console.log("mint", mint);
 	} catch (error) {
 		console.log(error);
@@ -71,8 +101,9 @@ async function mintToken() {
 
 async function mintToken2() {
 	try {
-		var mint = await tokenStore.token[0].contract.write.mint(["100000000000000000000"]);
+		var mint = await contractMeme2.value.methods
-		// .send({ from: web3.value.eth.Contract.defaultAccount });
+			.mint("100000000000000000000")
+			.send({ from: web3.value.eth.Contract.defaultAccount });
 		console.log("mint", mint);
 	} catch (error) {
 		console.log(error);
@@ -83,15 +114,14 @@ async function mintToken2() {
 	// console.log("totalSupply", totalSupply);
 }
 
-async function fetchBalance() {
-	var result = await walletV2Store.fetchBalance();
-	console.log("result", result);
-}
 
 // 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
@@ -109,46 +139,37 @@ async function stake() {
 
 	const spender = "0x7C3D5a19878d550D0c6c2b0BFC884ef410F6e440";
 	console.log("deadline", deadline);
-	var nonceTest = await contractBloodline.value.methods.nonces(fromAddress).call();
+	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);
+	const messageData = createPermitMessageData(
+		fromAddress,
+		spender,
+		nonceTest,
+		deadline,
+		value
+	);
 	console.log("messageData", messageData);
-	console.log("messageData.message", messageData.message);
-	console.log("messageData.domain", messageData.domain);
-	console.log("messageData.primaryType", messageData.primaryType);
 	// const sig = await signData(fromAddress, messageData.typedData);
-	// const signature = await signTyped(fromAddress, messageData.typedData);
+	const signature = await signTyped(fromAddress, messageData.typedData);
-	const typedData = JSON.parse(messageData.typedData);
-	console.log("typedData", typedData);
-	const signature = await signTypedData({
-		domain: messageData.domain,
-		message: messageData.message,
-		primaryType: messageData.primaryType,
-		types: typedData.types,
-	});
 	// console.log("sig", sig);
 	console.log("signature", signature);
 
 	const split = splitSig(signature);
 
 	console.log("split", split);
-	// var resultStake = await rewardlocker.value.methods
+	var resultStake = await rewardlocker.value.methods
-	// 	.stakeToBeSecured(value, deadline, split.v, split.r, split.s)
+		.stakeToBeSecured(value, deadline, split.v, split.r, split.s)
-	//     .send({ from: fromAddress });
+		.send({ from: fromAddress });
-	console.log("rewardLockerStore.contract", rewardLockerStore.contract);
-	var resultStake = await rewardLockerStore.contract.write.stakeToBeSecured([
-		value,
-		deadline,
-		split.v,
-		split.r,
-		split.s,
-	]);
 	console.log("resultStake", resultStake);
 
-	var allowance = await tokenStore.memeToken.contract.read.allowance([fromAddress, spender]);
+	var allowance = await contractBloodline.value.methods
+		.allowance(fromAddress, spender)
+		.call();
 	console.log("allowance", allowance);
 	// return Object.assign({}, sig, messageData.message);
 }
@@ -194,7 +215,13 @@ const signData = async function (fromAddress, typeData) {
 	return { v, r, s };
 };
 
-const createPermitMessageData = function (fromAddress, spender, nonce, deadline, value) {
+const createPermitMessageData = function (
+	fromAddress,
+	spender,
+	nonce,
+	deadline,
+	value
+) {
 	const message = {
 		owner: fromAddress,
 		spender: spender,
@@ -249,8 +276,6 @@ const createPermitMessageData = function (fromAddress, spender, nonce, deadline,
 	return {
 		typedData,
 		message,
-		domain: JSON.parse(typedData).domain,
-		primaryType: JSON.parse(typedData).primaryType,
 	};
 };
 // console.log("balanceOf", contract.mint(10));

src/views/WagmiView.vue

@@ -21,11 +21,14 @@ 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";
@@ -74,7 +77,9 @@ config.value = createConfig({
 					name: "Bloodline-App",
 					description: "TODO Bloodline Description",
 					url: "https://gitea.loseyourip.com/",
-					icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
+					icons: [
+						"https://gitea.loseyourip.com/assets/img/vampir.png",
+					],
 				},
 			},
 		}),