Merge branch 'master' into development

index.html

@@ -8,6 +8,7 @@
   </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

@@ -1,37 +1,35 @@
 {
-	"name": "vue-ethereum2",
+    "name": "vue-ethereum2",
-	"version": "0.0.0",
+    "version": "0.0.0",
-	"private": true,
+    "private": true,
-	"scripts": {
+    "scripts": {
-		"dev": "vite",
+        "dev": "vite",
-		"build": "vite build",
+        "build": "vite build",
-		"preview": "vite preview",
+        "preview": "vite preview",
-		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
-	},
+    },
-	"dependencies": {
+    "dependencies": {
-		"@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/fontawesome-svg-core": "^6.4.0",
-		"@fortawesome/free-brands-svg-icons": "^6.4.0",
+        "@fortawesome/free-brands-svg-icons": "^6.4.0",
-		"@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
-		"@fortawesome/vue-fontawesome": "^3.0.3",
+        "@fortawesome/vue-fontawesome": "^3.0.3",
-		"@wagmi/core": "^1.3.8",
+        "@wagmi/core": "^1.3.8",
-		"abi-decoder": "^2.4.0",
+        "abi-decoder": "^2.4.0",
-		"ethers": "^6.6.3",
+        "blockies": "^0.0.2",
-		"pinia": "^2.0.36",
+        "pinia": "^2.0.36",
-		"pinia-plugin-persistedstate": "^3.1.0",
+        "pinia-plugin-persistedstate": "^3.1.0",
-		"sass": "^1.62.1",
+        "sass": "^1.62.1",
-		"swiper": "^9.4.1",
+        "swiper": "^9.4.1",
-		"viem": "^1.5.4",
+        "viem": "^1.4.1",
-		"vue": "^3.3.2",
+        "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",
-	"devDependencies": {
+        "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-		"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+        "@vitejs/plugin-vue": "^4.2.3",
-		"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+        "eslint": "^8.39.0",
-		"@vitejs/plugin-vue": "^4.2.3",
+        "eslint-plugin-vue": "^9.11.0",
-		"eslint": "^8.39.0",
+        "vite": "^4.3.5"
-		"eslint-plugin-vue": "^9.11.0",
+    }
-		"vite": "^4.3.5"
-	}
 }

src/App.vue

@@ -8,7 +8,6 @@ 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";
@@ -18,6 +17,7 @@ import {
 	watchAccount,
 	watchNetwork,
 	watchContractEvent,
+	watchWalletClient,
 	getAccount,
 	getNetwork,
 	getPublicClient,
@@ -28,7 +28,6 @@ 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);
@@ -38,6 +37,7 @@ const showPanel = ref(false);
 const eventWatch = ref(null);
 const netWorkEvent = ref(null);
 const memeSacrificedEvent = ref(null);
+const clientClientEvent = ref(null);
 
 isMobile.value = isMobileFunc();
 onUnmounted(() => {
@@ -45,6 +45,8 @@ onUnmounted(() => {
 
 	eventWatch.value();
 	netWorkEvent.value();
+	memeSacrificedEvent.value();
+	clientClientEvent.value();
 	console.log("unsubscribe");
 });
 const handleWindowSizeChange = () => {
@@ -64,6 +66,7 @@ function isMobileFunc() {
 	}
 }
 provide("isMobile", isMobile);
+provide("showPanel", showPanel);
 
 onMounted(async () => {
 	window.addEventListener("resize", handleWindowSizeChange);
@@ -101,10 +104,16 @@ 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;
@@ -116,6 +125,16 @@ 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);
+				}
+			);
 		}
 	});
 
@@ -131,6 +150,18 @@ 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>
 
@@ -139,14 +170,35 @@ onMounted(async () => {
 	<slideout-panel v-model="showPanel">
 		<connect-wallet></connect-wallet>
 	</slideout-panel>
-	<div class="main">
+	<div class="main" :class="{ 'no-scroll': showPanel, mobile: isMobile }">
 		<RouterView />
 	</div>
 	<div class="footer">
 		<div class="footer-inner">
-			$BLOOD is 100%<br />
+			Follow Bloodline
+			<!-- $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>
@@ -160,4 +212,8 @@ onMounted(async () => {
         padding: 24px
         font-size: 24px
         text-align: center
+.main
+    &.mobile
+        &.no-scroll
+            overflow: hidden
 </style>

src/assets/contracts/Multicall.json

@@ -1,444 +0,0 @@
-{
-    "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

@@ -0,0 +1 @@
+!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,6 +16,8 @@
         border: 4px solid #000
     &.purple
         border-color: var(--purple)
+    &.white
+        border-color: var(--white)
 
 .bloodline-badge
     padding: 8px 16px 8px 16px
@@ -24,6 +26,8 @@
     display: flex
     .bloodline-badge-icon
         margin-right: 8px
+    &.grey
+        background-color: var(--grey)
 
 .card
     display: block

src/assets/sass/buttons.sass

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

src/assets/sass/variables.sass

@@ -29,11 +29,13 @@ $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>
-	<h3>Connect Wallet</h3>
+	<div class="connect-wallet-headline">Connect Wallet</div>
 	<div class="connectors-wrapper" v-if="!walletStore.connected">
 		<div
 			class="connectors-element"
@@ -11,30 +11,79 @@
 			</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 {
+import { disconnect } from "@wagmi/core";
-	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);
@@ -43,41 +92,6 @@ 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 {
@@ -94,12 +108,30 @@ 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
@@ -116,4 +148,53 @@ async function connectWallet(connector) {
         .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,13 +2,14 @@
 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);
@@ -68,11 +69,14 @@ onBeforeUnmount(() => {
 				<div class="navbar-end">
 					<div v-if="!isMobile">
 						<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
-						<div v-if="!address" class="btn btn-immortal" @click="$emit('showPanel', true)">connect</div>
+						<div v-if="!address" class="btn btn-immortal" @click="showPanel = true">connect</div>
-						<span v-else @click="$emit('showPanel', true)"> {{ address }}</span>
+						<span v-else @click="showPanel = true"> test</span>
 					</div>
-					<div v-else class="hamburger-menu">
+					<div v-else @click="showPanel = true">
-						<font-awesome-icon :icon="['fas', 'bars']" />
+						<div class="login-icon" v-if="!address">
+							<font-awesome-icon :icon="['fas', 'fa-arrow-right-to-bracket']" />
+						</div>
+						<div v-else><img :src="getblocky(address)" alt="avatar" /></div>
 					</div>
 				</div>
 			</div>
@@ -93,8 +97,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
@@ -138,7 +142,19 @@ header
             .navbar-end
                 display: flex
                 margin-left: auto
-                .hamburger-menu
+                .login-icon
-                    color: var(--purple)
+                    color: var(--white)
-                    font-size: 42px
+                    background-color: var(--purple)
+                    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="connected">
+					<div v-if="walletStore.connected">
 						<div
 							class="btn btn-immortal"
 							v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
@@ -105,7 +105,8 @@
 						</div>
 					</div>
 					<div v-else>
-						<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
+						<!-- <div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div> -->
+						<div class="btn btn-immortal" @click="showPanel = true">Connect</div>
 					</div>
 				</div>
 			</div>
@@ -115,15 +116,16 @@
 
 <script setup>
 import { ref, defineProps, watch, inject, computed } from "vue";
-import { useWalletStore } from "@/stores/wallet";
+import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
 import { useMemeburnerStore } from "@/stores/memeburner";
 import { storeToRefs } from "pinia";
 import Helper from "@/utils/helper.js";
 const isMobile = inject("isMobile");
+const showPanel = inject("showPanel");
 
-const walletStore = useWalletStore();
+const walletStore = useWalletStoreV2();
-const { contract, connected } = storeToRefs(walletStore);
+// const { connected } = storeToRefs(walletStore);
 
 const tokenStore = useTokenStore();
 const { activeToken, loading } = storeToRefs(tokenStore);

src/components/SlideoutPanel.vue

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

src/components/StakeMenu.vue

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

src/components/TokenInput.vue

@@ -0,0 +1,53 @@
+<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

@@ -0,0 +1,24 @@
+<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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,72 @@
+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,3 +17,22 @@ 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,9 +14,9 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
-import { faArrowDown, faArrowRight, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket } from "@fortawesome/free-solid-svg-icons";
-import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
 
+import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
 
 /* add icons to the library */
 library.add(
@@ -31,6 +31,8 @@ library.add(
 	faCaretRight,
 	faBars,
 	faAnglesRight,
+    faArrowRightToBracket,
+    faArrowRightFromBracket,
 	faChevronDown,
 	faChevronUp
 );

src/stores/memeburner.js

@@ -1,12 +1,10 @@
 import { defineStore } from "pinia";
 import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
 import { useTokenStore } from "./tokens";
-import { useMultiCallStore } from "./multicall";
-import { useWalletStore } from "./wallet";
 import { useWalletStoreV2 } from "./walletV2";
 import { useRoundsStore } from "@/stores/rounds";
 
-import { multicall, getContract, fetchToken, waitForTransaction } from "@wagmi/core";
+import { multicall, getContract, fetchToken, waitForTransaction, getWalletClient } from "@wagmi/core";
 
 
 export const useMemeburnerStore = defineStore("memeburner", {
@@ -22,28 +20,12 @@ 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();
@@ -71,8 +53,8 @@ export const useMemeburnerStore = defineStore("memeburner", {
 			console.log("getSacrificedRound", roundnumber);
 			const tokenStore = useTokenStore();
 			const contracts = [];
-			for (let index = 0; index < tokenStore.token.length; index++) {
+			for (let index = 0; index < tokenStore.sacrificeToken.length; index++) {
-				const token = tokenStore.token[index];
+				const token = tokenStore.sacrificeToken[index];
 				console.log("token.contractAddress", token.contractAddress);
 				console.log("roundnumber", roundnumber);
 				// contracts.push(this.contract.methods.getSacrificedMeme(roundnumber, token.contractAddress));
@@ -87,17 +69,17 @@ export const useMemeburnerStore = defineStore("memeburner", {
             return data;
 		},
 		async sacrificeMeme(amount) {
-			const walletStore = useWalletStore();
 			const tokenStore = useTokenStore();
 			try {
 				if (!amount || amount == 0) {
 					//todo error
 					console.error("amount is 0 or null or undefined");
 					return;
-				}
+                }
 				this.loading = true;
 				const amountDecimal = BigInt(amount * Math.pow(10, tokenStore.activeToken.decimals));
                 console.log("this.contract", this.contract);
+                console.log("amountDecimal", amountDecimal);
 				var hash = await this.contract.write
 					.sacrificeMeme([tokenStore.activeToken.contractAddress, amountDecimal])
                 console.log("hash", hash);

src/stores/multicall.js

@@ -1,49 +0,0 @@
-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,10 +1,7 @@
 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";
 
 
@@ -24,7 +21,6 @@ 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
@@ -39,9 +35,9 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			console.log("getRewardsForAllToken");
 			const tokenStore = useTokenStore();
 			const walletStore = useWalletStoreV2();
-			const contracts = [];
+            const contracts = [];
-			for (let index = 0; index < tokenStore.token.length; index++) {
+			for (let index = 0; index < tokenStore.sacrificeToken.length; index++) {
-                const token = tokenStore.token[index];
+                const token = tokenStore.sacrificeToken[index];
 				// calls.push(this.contract.methods.rewards(walletStore.address, roundNumber, token.contractAddress));
 				contracts.push({
 					...this.contract,
@@ -62,6 +58,7 @@ 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));
@@ -71,5 +68,8 @@ 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,6 @@ 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";
 

src/stores/tokens.js

@@ -1,16 +1,13 @@
 import { defineStore } from "pinia";
 import { markRaw } from "vue";
-import Web3 from "web3";
-import { useWalletStore } from "./wallet";
 import { useWalletStoreV2 } from "./walletV2";
 import { useContractStore } from "./contracts";
-import { ethers } from "ethers";
 import { useMemeburnerStore } from "./memeburner";
 import Meme1Json from "@/assets/contracts/Meme1.json";
 import Meme2Json from "@/assets/contracts/Meme2.json";
 import MemeToken from "@/assets/contracts/MemeToken.json";
 import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
-import { multicall, getContract, fetchToken } from "@wagmi/core";
+import { multicall, getContract, fetchToken, getWalletClient, waitForTransaction } from "@wagmi/core";
 
 
 export const useTokenStore = defineStore("token", {
@@ -27,7 +24,6 @@ export const useTokenStore = defineStore("token", {
 				backgroundColor: "#4b8501",
 				abi: Meme1Json.abi,
 				contractAddress: Meme1Json.contractAddress,
-                ethcontract: null,
 			},
 			{
 				name: "$SHIB",
@@ -40,6 +36,11 @@ 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",
@@ -60,61 +61,79 @@ export const useTokenStore = defineStore("token", {
 			allowance: null,
 		},
 		loading: false,
-		memeToken: {
+		// memeToken: getTpelm
-			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-------------");
+			console.log("-----------init token-------------");
-            const contracts = [];
+			const walletStore = useWalletStoreV2();
-            const walletStore = useWalletStoreV2();
 			for (let index = 0; index < this.token.length; index++) {
+				const contracts = [];
 				const token = this.token[index];
-                token.contract = getContract({
+				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"})
 
-            }
+				contracts.push({ ...token.contract, functionName: "decimals" });
-
+				contracts.push({ ...token.contract, functionName: "name" });
-            
+				contracts.push({ ...token.contract, functionName: "symbol" });
-            //MemeToken init
+				contracts.push({ ...token.contract, functionName: "totalSupply" });
-            this.memeToken.contract = getContract({
+				const data = await multicall({
-				address: this.memeToken.config.contractAddress,
-				abi: this.memeToken.config.abi,
-				PublicClient: walletStore.publicClient,
-				WalletClient: walletStore.walletClient,
-			});
-                contracts.push({ ...this.memeToken.contract, functionName: "decimals" });
-
-
-             const data = await multicall({
 					contracts,
-             });
+				});
-            //multicall decimal
+				token.decimals = data[0].result;
-            for (let index = 0; index < this.token.length; index++) {
+				token.name = data[1].result;
-                const token = this.token[index];
+				token.symbol = data[2].result;
-                token.decimals = data[index].result
+				token.totalSupply = data[3].result;
-            }
+			}
 
-            this.memeToken.decimals = data[this.token.length].result;
+			// MemeToken init
+			// 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) {
+		async changeActiveToken(token) {
-            console.log("changeActiveToken");
+			console.log("changeActiveToken");
 			this.activeToken = token;
-			// const web3 = new Web3(window.ethereum);
+			const walletStore = useWalletStoreV2();
-			// this.contract = new web3.eth.Contract(token.abi, token.contractAddress);
+			if (walletStore.connected) {
-            const walletStore = useWalletStoreV2();
+				//TODO, wenn connected, dann all diese Daten laden?
-            if (walletStore.connected) {
-                //TODO, wenn connected, dann all diese Daten laden?
 				this.activeToken.balance = await walletStore.getTokenBalance(token);
 				this.activeToken.allowance = await this.allowance();
 			}
@@ -126,48 +145,44 @@ export const useTokenStore = defineStore("token", {
 			// var allowance = await this.contract.methods
 			// 	.allowance(walletStore.address, memeBurnerStore.config.contractAddress)
 			// 	.call();
-            console.log("this.activeToken.contract", this.activeToken.contract);
+			console.log("this.activeToken.contract", this.activeToken.contract);
-            var allowance = await this.activeToken.contract.read.allowance([
+			var allowance = await this.activeToken.contract.read.allowance([
 				walletStore.address,
 				memeBurnerStore.config.contractAddress,
 			]);
 			// var decimals = await this.contract.methods.decimals().call();
 			// console.log("decimals", decimals);
-            const decimals = this.activeToken.decimals;
+			const decimals = this.activeToken.decimals;
 
-            allowance = BigInt(allowance / BigInt(Math.pow(10, decimals)));
+			allowance = BigInt(allowance / BigInt(Math.pow(10, decimals)));
-            console.log("allowance", allowance);
+			console.log("allowance", allowance);
 			return allowance;
 		},
 		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});
-				//todo parameter value übergeben in eth web3.utils.toHex(web3.utils.toWei(amount, 'ether'))
+				console.log("approve");
+				var approveHash = await this.activeToken.contract.write.approve([
+					memeBurnerStore.config.contractAddress,
+					amount,
+				]);
 
-				// .send({ from: walletStore.address, value: 0.5 });
+				const data = await waitForTransaction({
-				this.activeToken.allowance = await this.allowance();
+					hash: approveHash,
-				return approve;
+				});
+				return data;
 			} catch (error) {
 				console.error(error);
 			} finally {
 				this.loading = false;
 			}
 		},
-		getTokenContract(token) {
+		async nonces(userAddress) {
-			console.log("token", token);
+			return this.memeToken.contract.read.nonces([userAddress]);
-			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

@@ -1,119 +0,0 @@
-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,24 +1,28 @@
 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 } from "@wagmi/core/chains";
+import { goerli, mainnet } from "@wagmi/core/chains";
 import { publicProvider } from "@wagmi/core/providers/public";
 import { alchemyProvider } from "@wagmi/core/providers/alchemy";
 
@@ -29,27 +33,28 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 		alchemy: null,
 		connected: false,
 		address: null,
-		web3: null,
+		provider: null,
-        provider: null,
+		client: null,
-        client: null,
+		publicClient: null,
-        publicClient: null,
+		walletClient: null,
-        walletClient: null,
+		config: null,
-        config: null,
+		chain: null,
-        chain: null,
+		token: [],
 	}),
-	getters: {},
+	getters: {
-    actions: {
+		sacrificeToken: (state) => state.token.filter((obj) => obj.contractAddress !== MemeToken.contractAddress),
-        async init() {
+		memeToken: (state) => state.token.find((obj) => obj.contractAddress === MemeToken.contractAddress),
-            
+	},
-            console.log("wallet init");
+	actions: {
-            const goerliKey = import.meta.env.VITE_GOERLI_KEY;
+		async init() {
-            const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
+			console.log("wallet init");
+			const goerliKey = import.meta.env.VITE_GOERLI_KEY;
+			const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
 
 			const { chains, publicClient, webSocketPublicClient } = configureChains(
-				[goerli],
+				[goerli, mainnet],
 				[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
-            );
+			);
-
 
 			this.config = createConfig({
 				autoConnect: true,
@@ -106,74 +111,64 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 			// 		}
 			// 	});
 
-			// 	// provider = new ethers.BrowserProvider(window.ethereum);
+			console.log("this.config", this.config);
-			// } else {
+			const walletClient = await getWalletClient();
-			// 	const url = `https://eth-goerli.g.alchemy.com/v2/${goerliKey}`;
+			console.log("walletClient", walletClient);
-			// 	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) {
+		async connectWallet(connector) {
-		//     this.address = data[0];
+			console.log("connector.name", connector.name);
-		// },
+			// if (!account.isConnected) {
-       async connectWallet(connector) {
+			const connection = await connect({
-            console.log("connector.name", connector.name);
-            // if (!account.isConnected) {
-            const connection = await connect({
 				chainId: goerli.id,
 				connector: connector,
-            });
+			});
-            // this.address = connection.account;
+
+			console.log("connection", connection);
+			// this.address = connection.account;
 		},
 		async getTokenBalance(token) {
-			// const tokenStore = useTokenStore();
+			console.log("token", token);
-			// const contract = tokenStore.getTokenContract(token);
+			console.log("address", this.address);
-			// const result = await contract.methods.balanceOf(this.address).call();
+			const result = await token.contract.read.balanceOf([this.address]);
-            console.log("this.address", this.address);
-            const result = await token.contract.read.balanceOf([this.address]);
 			return result;
 		},
-		// async isConnected() {
+
-		// 	try {
+		async getTokenBalances() {
-		// 		this.loading = true;
+			console.log("getTokenBalances");
-		// 		if (!window.ethereum) {
+			const tokenStore = useTokenStore();
-		// 			console.warn("Metamask not installed"), (this.connected = false);
+			console.log("tokenStore.token.length", tokenStore.token.length);
-		// 			return;
+			var contracts = [];
-		// 		}
+			for (let index = 0; index < tokenStore.token.length; index++) {
-		// 		const accounts = await window.ethereum.request({ method: "eth_accounts" });
+				const token = tokenStore.token[index];
-		// 		if (accounts.length) {
+				contracts.push({ ...token.contract, functionName: "balanceOf", args: [this.address] });
-		// 			this.connected = true;
+			}
-		// 			this.address = accounts[0];
+
-		// 			console.log(`You're connected to: ${accounts[0]}`);
+			const data = await multicall({
-		// 			// const web3 = new Web3(window.ethereum);
+				contracts,
-		// 			// const tokenStore = useTokenStore();
+			});
-		// 			// console.log("tokenStore.activeToken", tokenStore.activeToken);
+			console.log("data", data);
-		// 			// if (tokenStore.activeToken.contractAddress) {
+			for (let index = 0; index < tokenStore.token.length; index++) {
-		// 			// 	tokenStore.activeToken.balance = await this.getTokenBalance(
+				const token = tokenStore.token[index];
-		// 			// 		tokenStore.activeToken
+				const balanceOfDecimal = data[index].result / BigInt(Math.pow(10, token.decimals));
-		// 			// 	);
+				this.token.push({
-		// 			// 	tokenStore.activeToken.allowance = await tokenStore.allowance();
+					contractAddress: token.contractAddress,
-		// 			// }
+					balanceOf: Number(balanceOfDecimal),
-		// 			// tokenStore.memeBurner.contract = new web3.eth.Contract(
+				});
-		// 			// 	tokenStore.memeBurner.config.abi,
+			}
-		// 			// 	tokenStore.memeBurner.config.contractAddress
+        },
-		// 			// );
+        async loadWalletData() {
-		// 		} else {
+			const rewardlockerStore = useRewardLockerStore();
-		// 			console.log("Metamask is not connected");
+
-		// 			this.connected = false;
+	        await this.getTokenBalances();
-		// 		}
+            
-		// 	} catch (error) {
+            //MemeToken Staked
-		// 		console.log("error", error);
+            const tokenStore = useTokenStore();
-		// 	} finally {
+            
-		// 		this.loading = false;
+            const staked = await rewardlockerStore.getStaked(this.address);
-		// 		return this.connected;
+            
-		// 	}
+            this.memeToken.staked = Number(staked / BigInt(Math.pow(10, tokenStore.memeToken.decimals)));
-		// },
+
+        }
 	},
 	persist: true,
 });

src/views/HomeView.vue

@@ -4,13 +4,11 @@ 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);
@@ -86,13 +84,13 @@ function timeBetweenDates() {
 				</div>
 			</section>
 			<section id="sacrifice" class="container">
-				<sacrifice-token :data="token"></sacrifice-token>
+				<sacrifice-token :data="tokenStore.sacrificeToken"></sacrifice-token>
 			</section>
 
 			<div class="container section-header-container">
-				<h3>Bloodline Cycle</h3>
+				<h3>Cycle</h3>
-				Become the most powerful clan each cycle and claim extra rewards.<br />Claim and trade your $BLOOD at
+				Become the most powerful clan each cycle and claim extra rewards.Claim and trade your $BLOOD at each
-				each cycle's end.
+				cycle's end.
 			</div>
 			<section id="cycle-section" class="container">
 				<div class="slider-wrapper">
@@ -277,6 +275,13 @@ 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
@@ -293,7 +298,8 @@ function timeBetweenDates() {
 
 .section-header-container
     text-align: center
-    font-size: 24px
+    font-size: 16px
+    padding: 0 24px
     margin-top: 64px
     margin-bottom: 64px
     @media (min-width: 992px)

src/views/TestView.vue

@@ -7,20 +7,27 @@
 		<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);
@@ -28,11 +35,6 @@ 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);
@@ -40,55 +42,23 @@ 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(
-	contractMeme1.value = new web3.value.eth.Contract(
+	// 	RewardLockerJson.abi,
-		Meme1Json.abi,
+	// 	RewardLockerJson.contractAddress
-		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 contractMeme1.value.methods
+		var mint = await tokenStore.token[0].contract.write.mint(["100000000000000000000000"]);
-			.mint("100000000000000000000000")
+		// .send({ from: web3.value.eth.Contract.defaultAccount });
-			.send({ from: web3.value.eth.Contract.defaultAccount });
 		console.log("mint", mint);
 	} catch (error) {
 		console.log(error);
@@ -101,9 +71,8 @@ async function mintToken() {
 
 async function mintToken2() {
 	try {
-		var mint = await contractMeme2.value.methods
+		var mint = await tokenStore.token[0].contract.write.mint(["100000000000000000000"]);
-			.mint("100000000000000000000")
+		// .send({ from: web3.value.eth.Contract.defaultAccount });
-			.send({ from: web3.value.eth.Contract.defaultAccount });
 		console.log("mint", mint);
 	} catch (error) {
 		console.log(error);
@@ -114,14 +83,15 @@ 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(
+		.allowance(web3.value.eth.Contract.defaultAccount, MemeBurnerJson.contractAddress)
-			web3.value.eth.Contract.defaultAccount,
-			MemeBurnerJson.contractAddress
-		)
 		.call();
 	console.log("allowance", allowance);
 	var reward = await contractBurner.value.methods
@@ -139,37 +109,46 @@ async function stake() {
 
 	const spender = "0x7C3D5a19878d550D0c6c2b0BFC884ef410F6e440";
 	console.log("deadline", deadline);
-	var nonceTest = await contractBloodline.value.methods
+	var nonceTest = await contractBloodline.value.methods.nonces(fromAddress).call();
-		.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(
+	const messageData = createPermitMessageData(fromAddress, spender, nonceTest, deadline, value);
-		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 contractBloodline.value.methods
+	var allowance = await tokenStore.memeToken.contract.read.allowance([fromAddress, spender]);
-		.allowance(fromAddress, spender)
-		.call();
 	console.log("allowance", allowance);
 	// return Object.assign({}, sig, messageData.message);
 }
@@ -215,13 +194,7 @@ const signData = async function (fromAddress, typeData) {
 	return { v, r, s };
 };
 
-const createPermitMessageData = function (
+const createPermitMessageData = function (fromAddress, spender, nonce, deadline, value) {
-	fromAddress,
-	spender,
-	nonce,
-	deadline,
-	value
-) {
 	const message = {
 		owner: fromAddress,
 		spender: spender,
@@ -276,6 +249,8 @@ const createPermitMessageData = function (
 	return {
 		typedData,
 		message,
+		domain: JSON.parse(typedData).domain,
+		primaryType: JSON.parse(typedData).primaryType,
 	};
 };
 // console.log("balanceOf", contract.mint(10));

src/views/WagmiView.vue

@@ -1,16 +1,16 @@
 <template>
-    <div>
+	<div>
-        <div v-if="!fromAddress" @click="showConnectors = true">Connect</div>
+		<div v-if="!fromAddress" @click="showConnectors = true">Connect</div>
-        <div v-if="showConnectors">
+		<div v-if="showConnectors">
-            <div v-for="connector in config.connectors" @click="connectWallet(connector)"> 
+			<div v-for="connector in config.connectors" @click="connectWallet(connector)">
-                {{ connector.name}}
+				{{ connector.name }}
-            </div>
+			</div>
-        </div>
+		</div>
-       <div v-if="fromAddress" @click="disconnectWallet">Disconnect</div>
+		<div v-if="fromAddress" @click="disconnectWallet">Disconnect</div>
-    </div>
+	</div>
 </template>
 
-<script setup >
+<script setup>
 import { ref, toRaw, onMounted, onUnmounted } from "vue";
 import Meme1Json from "@/assets/contracts/Meme1.json";
 import { useWalletStore } from "@/stores/wallet";
@@ -21,14 +21,11 @@ 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";
@@ -77,9 +74,7 @@ config.value = createConfig({
 					name: "Bloodline-App",
 					description: "TODO Bloodline Description",
 					url: "https://gitea.loseyourip.com/",
-					icons: [
+					icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
-						"https://gitea.loseyourip.com/assets/img/vampir.png",
-					],
 				},
 			},
 		}),