cycleview

great start

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

.gitignore

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

package-lock.json

@@ -19,9 +19,10 @@
 				"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",
+				"wagmi": "^1.3.9",
 				"web3": "^v1.9.0"
 			},
 			"devDependencies": {
@@ -1274,6 +1275,80 @@
 				"node": ">=14.16"
 			}
 		},
+		"node_modules/@tanstack/query-core": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.32.6.tgz",
+			"integrity": "sha512-YVB+mVWENQwPyv+40qO7flMgKZ0uI41Ph7qXC2Zf1ft5AIGfnXnMZyifB2ghhZ27u+5wm5mlzO4Y6lwwadzxCA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
+		"node_modules/@tanstack/query-persist-client-core": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.32.6.tgz",
+			"integrity": "sha512-MJJ7CldvT5HOel50h/3wOZZwVlIcroFD5Vxn8vPsfo2C0qQ208ilmN/81JWutm/lWy4n2BjnCrrWv6HvVI7S0w==",
+			"dependencies": {
+				"@tanstack/query-core": "4.32.6"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
+		"node_modules/@tanstack/query-sync-storage-persister": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.32.6.tgz",
+			"integrity": "sha512-hTwNo5O5EvydbfdVvwnwY0nIrNg1BxKEV4WAA8A+0NP9yc/9xoWy8RxbIkcz1p4JN2JhagaTKek8Fa5h5KitsA==",
+			"dependencies": {
+				"@tanstack/query-persist-client-core": "4.32.6"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
+		"node_modules/@tanstack/react-query": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.32.6.tgz",
+			"integrity": "sha512-AITu/IKJJJXsHHeXNBy5bclu12t08usMCY0vFC2dh9SP/w6JAk5U9GwfjOIPj3p+ATADZvxQPe8UiCtMLNeQbg==",
+			"dependencies": {
+				"@tanstack/query-core": "4.32.6",
+				"use-sync-external-store": "^1.2.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-native": "*"
+			},
+			"peerDependenciesMeta": {
+				"react-dom": {
+					"optional": true
+				},
+				"react-native": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@tanstack/react-query-persist-client": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-4.32.6.tgz",
+			"integrity": "sha512-EmNnYpvFYpxS4j5WFeNmfVVBxqq4RDnEFDBZwNKRfb4pzukcx/hcWtwqFk7Qj0EI4Dk8QGl239MEYwJbAc83tQ==",
+			"dependencies": {
+				"@tanstack/query-persist-client-core": "4.32.6"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			},
+			"peerDependencies": {
+				"@tanstack/react-query": "^4.32.6"
+			}
+		},
 		"node_modules/@types/bn.js": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/@types/bn.js/-/bn.js-5.1.1.tgz",
@@ -5991,6 +6066,20 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-dom": {
+			"version": "18.2.0",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+			"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"loose-envify": "^1.1.0",
+				"scheduler": "^0.23.0"
+			},
+			"peerDependencies": {
+				"react": "^18.2.0"
+			}
+		},
 		"node_modules/readable-stream": {
 			"version": "3.6.2",
 			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -6369,6 +6458,16 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/scheduler": {
+			"version": "0.23.0",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+			"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"loose-envify": "^1.1.0"
+			}
+		},
 		"node_modules/scrypt-js": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/scrypt-js/-/scrypt-js-3.0.1.tgz",
@@ -7193,15 +7292,16 @@
 			}
 		},
 		"node_modules/viem": {
-			"version": "1.4.1",
+			"version": "1.5.4",
-			"resolved": "https://registry.npmjs.org/viem/-/viem-1.4.1.tgz",
+			"resolved": "https://registry.npmjs.org/viem/-/viem-1.5.4.tgz",
-			"integrity": "sha512-MtaoBHDSJDqa+QyXKG5d+S6EQSebRO0tzw6anSP4zC7AbC614vMeg9Y8LbkmEkWCw8swFYkort+H9l7GkWB0uA==",
+			"integrity": "sha512-/B2KbAiTqiPd6fzJgz4pgS879IXbHfO44RP/0nsRvBEuFJvHQlekNIAHTa4d3LPlsHWAM8GcH4m2P5ZvtEHVxA==",
 			"dependencies": {
 				"@adraffy/ens-normalize": "1.9.0",
 				"@noble/curves": "1.0.0",
 				"@noble/hashes": "1.3.0",
 				"@scure/bip32": "1.3.0",
 				"@scure/bip39": "1.2.0",
+				"@types/ws": "^8.5.4",
 				"@wagmi/chains": "1.6.0",
 				"abitype": "0.9.3",
 				"isomorphic-ws": "5.0.0",
@@ -7246,6 +7346,14 @@
 				}
 			]
 		},
+		"node_modules/viem/node_modules/@types/ws": {
+			"version": "8.5.5",
+			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+			"integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
 		"node_modules/viem/node_modules/abitype": {
 			"version": "0.9.3",
 			"resolved": "https://registry.npmjs.org/abitype/-/abitype-0.9.3.tgz",
@@ -7395,6 +7503,39 @@
 				"vue": "^3.2.0"
 			}
 		},
+		"node_modules/wagmi": {
+			"version": "1.3.9",
+			"resolved": "https://registry.npmjs.org/wagmi/-/wagmi-1.3.9.tgz",
+			"integrity": "sha512-BQbl+vWLNpLraXd/MWsl1P3I41l7DHrujx6qshIa1HDV7Mdh0GNrDuluRYBtuK2bBx9WM/Fjw45Ef2aKADan9A==",
+			"funding": [
+				{
+					"type": "gitcoin",
+					"url": "https://wagmi.sh/gitcoin"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/wagmi-dev"
+				}
+			],
+			"dependencies": {
+				"@tanstack/query-sync-storage-persister": "^4.27.1",
+				"@tanstack/react-query": "^4.28.0",
+				"@tanstack/react-query-persist-client": "^4.28.0",
+				"@wagmi/core": "1.3.8",
+				"abitype": "0.8.7",
+				"use-sync-external-store": "^1.2.0"
+			},
+			"peerDependencies": {
+				"react": ">=17.0.0",
+				"typescript": ">=5.0.4",
+				"viem": ">=0.3.35"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/web3": {
 			"version": "1.10.0",
 			"resolved": "https://registry.npmjs.org/web3/-/web3-1.10.0.tgz",
@@ -8929,6 +9070,44 @@
 				"defer-to-connect": "^2.0.1"
 			}
 		},
+		"@tanstack/query-core": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.32.6.tgz",
+			"integrity": "sha512-YVB+mVWENQwPyv+40qO7flMgKZ0uI41Ph7qXC2Zf1ft5AIGfnXnMZyifB2ghhZ27u+5wm5mlzO4Y6lwwadzxCA=="
+		},
+		"@tanstack/query-persist-client-core": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.32.6.tgz",
+			"integrity": "sha512-MJJ7CldvT5HOel50h/3wOZZwVlIcroFD5Vxn8vPsfo2C0qQ208ilmN/81JWutm/lWy4n2BjnCrrWv6HvVI7S0w==",
+			"requires": {
+				"@tanstack/query-core": "4.32.6"
+			}
+		},
+		"@tanstack/query-sync-storage-persister": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.32.6.tgz",
+			"integrity": "sha512-hTwNo5O5EvydbfdVvwnwY0nIrNg1BxKEV4WAA8A+0NP9yc/9xoWy8RxbIkcz1p4JN2JhagaTKek8Fa5h5KitsA==",
+			"requires": {
+				"@tanstack/query-persist-client-core": "4.32.6"
+			}
+		},
+		"@tanstack/react-query": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.32.6.tgz",
+			"integrity": "sha512-AITu/IKJJJXsHHeXNBy5bclu12t08usMCY0vFC2dh9SP/w6JAk5U9GwfjOIPj3p+ATADZvxQPe8UiCtMLNeQbg==",
+			"requires": {
+				"@tanstack/query-core": "4.32.6",
+				"use-sync-external-store": "^1.2.0"
+			}
+		},
+		"@tanstack/react-query-persist-client": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-4.32.6.tgz",
+			"integrity": "sha512-EmNnYpvFYpxS4j5WFeNmfVVBxqq4RDnEFDBZwNKRfb4pzukcx/hcWtwqFk7Qj0EI4Dk8QGl239MEYwJbAc83tQ==",
+			"requires": {
+				"@tanstack/query-persist-client-core": "4.32.6"
+			}
+		},
 		"@types/bn.js": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/@types/bn.js/-/bn.js-5.1.1.tgz",
@@ -12659,6 +12838,17 @@
 				"loose-envify": "^1.1.0"
 			}
 		},
+		"react-dom": {
+			"version": "18.2.0",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+			"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+			"optional": true,
+			"peer": true,
+			"requires": {
+				"loose-envify": "^1.1.0",
+				"scheduler": "^0.23.0"
+			}
+		},
 		"readable-stream": {
 			"version": "3.6.2",
 			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -12937,6 +13127,16 @@
 				"source-map-js": ">=0.6.2 <2.0.0"
 			}
 		},
+		"scheduler": {
+			"version": "0.23.0",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+			"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+			"optional": true,
+			"peer": true,
+			"requires": {
+				"loose-envify": "^1.1.0"
+			}
+		},
 		"scrypt-js": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/scrypt-js/-/scrypt-js-3.0.1.tgz",
@@ -13570,15 +13770,16 @@
 			}
 		},
 		"viem": {
-			"version": "1.4.1",
+			"version": "1.5.4",
-			"resolved": "https://registry.npmjs.org/viem/-/viem-1.4.1.tgz",
+			"resolved": "https://registry.npmjs.org/viem/-/viem-1.5.4.tgz",
-			"integrity": "sha512-MtaoBHDSJDqa+QyXKG5d+S6EQSebRO0tzw6anSP4zC7AbC614vMeg9Y8LbkmEkWCw8swFYkort+H9l7GkWB0uA==",
+			"integrity": "sha512-/B2KbAiTqiPd6fzJgz4pgS879IXbHfO44RP/0nsRvBEuFJvHQlekNIAHTa4d3LPlsHWAM8GcH4m2P5ZvtEHVxA==",
 			"requires": {
 				"@adraffy/ens-normalize": "1.9.0",
 				"@noble/curves": "1.0.0",
 				"@noble/hashes": "1.3.0",
 				"@scure/bip32": "1.3.0",
 				"@scure/bip39": "1.2.0",
+				"@types/ws": "^8.5.4",
 				"@wagmi/chains": "1.6.0",
 				"abitype": "0.9.3",
 				"isomorphic-ws": "5.0.0",
@@ -13603,6 +13804,14 @@
 					"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.0.tgz",
 					"integrity": "sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg=="
 				},
+				"@types/ws": {
+					"version": "8.5.5",
+					"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+					"integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+					"requires": {
+						"@types/node": "*"
+					}
+				},
 				"abitype": {
 					"version": "0.9.3",
 					"resolved": "https://registry.npmjs.org/abitype/-/abitype-0.9.3.tgz",
@@ -13670,6 +13879,19 @@
 				"@vue/devtools-api": "^6.5.0"
 			}
 		},
+		"wagmi": {
+			"version": "1.3.9",
+			"resolved": "https://registry.npmjs.org/wagmi/-/wagmi-1.3.9.tgz",
+			"integrity": "sha512-BQbl+vWLNpLraXd/MWsl1P3I41l7DHrujx6qshIa1HDV7Mdh0GNrDuluRYBtuK2bBx9WM/Fjw45Ef2aKADan9A==",
+			"requires": {
+				"@tanstack/query-sync-storage-persister": "^4.27.1",
+				"@tanstack/react-query": "^4.28.0",
+				"@tanstack/react-query-persist-client": "^4.28.0",
+				"@wagmi/core": "1.3.8",
+				"abitype": "0.8.7",
+				"use-sync-external-store": "^1.2.0"
+			}
+		},
 		"web3": {
 			"version": "1.10.0",
 			"resolved": "https://registry.npmjs.org/web3/-/web3-1.10.0.tgz",

package.json

@@ -20,9 +20,10 @@
 		"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",
+		"wagmi": "^1.3.9",
 		"web3": "^v1.9.0"
 	},
 	"devDependencies": {

src/App.vue

@@ -70,28 +70,18 @@ onMounted(async () => {
 	handleWindowSizeChange();
 
 	// initContracts
-	await walletStore.init();
+	// await walletStore.init();
-	await tokenStore.initV2();
+	// await tokenStore.initV2();
-	await memeBurnerStore.init();
+	// await memeBurnerStore.init();
-	await rewardLockerStore.init();
+	// await rewardLockerStore.init();
-	await memeBurnerStore.init();
+	// await memeBurnerStore.init();
 	// await multiCallStore.init();
 	//Memeburner Contract
 
-	const account = getAccount();
-
-	console.log("account", account);
-	if (account.address) {
-		walletStore.address = account.address;
-		walletStore.connected = true;
-	}
-
 	//init
-	roundsStore.currentRound = parseInt(
+	// roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
-		await memeBurnerStore.getCurrentRound()
+	// console.log("roundsStore.currentRound", roundsStore.currentRound);
-	);
+	// roundsStore.activeRound = roundsStore.currentRound;
-	console.log("roundsStore.currentRound", roundsStore.currentRound);
-	roundsStore.activeRound = roundsStore.currentRound;
 	await roundsStore.fillRound(roundsStore.activeRound);
 
 	//events
@@ -145,10 +135,10 @@ onMounted(async () => {
 </script>
 
 <template>
-	<navbar @show-panel="((value) => showPanel = value)"/>
+	<navbar @show-panel="(value) => (showPanel = value)" />
-    <slideout-panel v-model="showPanel">
+	<slideout-panel v-model="showPanel">
-    <connect-wallet></connect-wallet>
+		<connect-wallet></connect-wallet>
-    </slideout-panel>
+	</slideout-panel>
 	<div class="main">
 		<RouterView />
 	</div>

src/assets/sass/main.sass

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

src/components/ConnectWallet.vue

@@ -1,15 +1,19 @@
 <template>
-    <h3>Connect Wallet</h3>
+	<h3>Connect Wallet</h3>
-    <div class="connectors-wrapper" v-if="!walletStore.connected">
+	<div class="connectors-wrapper" v-if="!walletStore.connected">
-        <div class="connectors-element" v-for="connector in walletStore.config?.connectors" @click="connectWallet(connector)">
+		<div
-            <div class="connector-icon">
+			class="connectors-element"
-                <img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`">
+			v-for="connector in walletStore.config?.connectors"
-            </div>
+			@click="connectWallet(connector)"
-            <div class="connector-name">{{ connector.name }}</div>
+		>
-        </div>
+			<div class="connector-icon">
-    </div>
+				<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
-    <div class="btn btn-immortal" v-else @click="disconnectWallet">disconnect</div>
+			</div>
-    <div>Connected: {{ walletStore.connected }}</div>
+			<div class="connector-name">{{ connector.name }}</div>
+		</div>
+	</div>
+	<div class="btn btn-immortal" v-else @click="disconnectWallet">disconnect</div>
+	<div>Connected: {{ walletStore.connected }}</div>
 </template>
 
 <script setup>
@@ -39,6 +43,10 @@ const accountSub = ref(null);
 
 const instance = getCurrentInstance();
 
+onMounted(() => {
+	console.log("walletStore.config?.connectors", walletStore.config?.connectors);
+});
+
 // config.value = createConfig({
 // 	autoConnect: true,
 // 	connectors: [
@@ -88,7 +96,6 @@ async function connectWallet(connector) {
 }
 </script>
 
-
 <style lang="sass">
 .connectors-wrapper
     display: flex
@@ -109,4 +116,4 @@ async function connectWallet(connector) {
         .connector-name
             padding: 0 8px
             align-self: center
-</style>
+</style>

src/components/Navbar.vue

@@ -14,8 +14,7 @@ const showNavbar = ref(true);
 const lastScrollPosition = ref(0);
 
 function onScroll() {
-	const currentScrollPosition =
+	const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
-		window.pageYOffset || document.documentElement.scrollTop;
 	if (currentScrollPosition < 0) {
 		return;
 	}
@@ -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">
@@ -114,6 +115,9 @@ header
                 line-height: 73.107px
                 @media (min-width: 992px)
                     font-size: 64px
+                a
+                    text-decoration: none
+                    color: white
             .navbar-center
                 display: flex
                 margin-left: auto

src/components/SacrificeToken.vue

@@ -117,7 +117,7 @@
 import { ref, defineProps, watch, inject, computed } from "vue";
 import { useWalletStore } from "@/stores/wallet";
 import { useTokenStore } from "@/stores/tokens";
-import { useMemeburnerStore } from "@/stores/memeBurner";
+import { useMemeburnerStore } from "@/stores/memeburner";
 import { storeToRefs } from "pinia";
 import Helper from "@/utils/helper.js";
 const isMobile = inject("isMobile");

src/main.js

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

src/router/index.js

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

src/stores/rounds.js

@@ -4,6 +4,7 @@ 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", {
@@ -22,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();
@@ -31,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();
@@ -41,25 +73,25 @@ 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("round not filled --> fill round");
-                    console.log("vor error");
+                console.log("vor error");
-                    var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
+                var data = await memeBurnerStore.getSacrificedRound(roundNumber)
-                    let rewardData = null;
+                let rewardData = null;
-                    if (walletStore.connected) {
+                if (walletStore.connected) {
-						rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
+                    rewardData = await rewardLockerStore.getRewardsForAllToken(roundNumber);
-                    } 
+                } 
-                    console.log("rewardData123", rewardData);
+                console.log("rewardData123", rewardData);
-                    
+                
-                    var goal = await memeBurnerStore.getGoal(this.activeRound);
+                var goal = await memeBurnerStore.getGoal(roundNumber);
-                    console.log("goal", goal);
+                console.log("goal", goal);
                 var tokenArray = []
                 var rewards_clan = 0
                 var rewards_sacrifice = 0
                 for (let index = 0; index < data.length; index++) {
                     var tokenData = {};
                     const token = tokenStore.token[index];
-                    var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(this.activeRound, token.contractAddress);
+                    var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(roundNumber, token.contractAddress);
                     
                     
 
@@ -69,31 +101,31 @@ 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;
+                        const sacrificeRewards = Number(rewardData[index].result) - clanwin;
 
                         tokenData.rewards_ges = BigInt(rewardData[index].result);
                         tokenData.rewards_clan = BigInt(clanwin);
                         tokenData.rewards_sacrifice = BigInt(sacrificeRewards);
 
                         rewards_clan = rewards_clan + (clanwin / Math.pow(10, token.decimals));
-						rewards_sacrifice =
+                        rewards_sacrifice =
                             rewards_sacrifice + sacrificeRewards / Math.pow(10, token.decimals);
-					}
-                    tokenArray.push(tokenData);
                     }
-                const goalInBLD = await memeBurnerStore.getGoalInBLD(this.activeRound);
+                    tokenArray.push(tokenData);
-                this.rounds[this.activeRound] = {
+                }
-					goal: goal[0],
+                const goalInBLD = await memeBurnerStore.getGoalInBLD(roundNumber);
-					goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
+                this.rounds[roundNumber] = {
-					expirationTimestamp: goal[1],
+                    goal: goal[0],
-					rewards_clan: BigInt(rewards_clan),
+                    goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
-					rewards_sacrifice: BigInt(rewards_sacrifice),
+                    expirationTimestamp: goal[1],
-					rewards_total: BigInt(rewards_clan + rewards_sacrifice),
+                    rewards_clan: BigInt(rewards_clan),
-					token: tokenArray,
+                    rewards_sacrifice: BigInt(rewards_sacrifice),
-				};
+                    rewards_total: BigInt(rewards_clan + rewards_sacrifice),
-                    console.log("this.rounds[this.activeRound]", this.rounds[this.activeRound]);
+                    token: tokenArray,
+                };
+                console.log("this.rounds[roundNumber]", this.rounds[roundNumber]);
             } else {
                 console.log("round already filled");
             }

src/stores/wallet.js

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

src/stores/walletV2.js

@@ -79,6 +79,15 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				webSocketPublicClient,
             });
             this.publicClient = publicClient;
+
+            console.log("hier123");
+             const account = getAccount();
+
+				console.log("account123abc", account);
+				if (account.address) {
+					this.address = account.address;
+					this.connected = true;
+				}
 			// await this.isConnected();
 			// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
 			// if (this.connected) {

src/views/CycleView.vue

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

src/views/HomeView.vue

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

src/views/ProfileView.vue

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

src/views/TestView.vue

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

src/views/WagmiView.vue

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