cycleview

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

@@ -56,10 +56,6 @@ function showPanelTest(bla) {
 	console.log("bla", bla);
 }
 
-function showPanelTest(bla) {
-	console.log("bla", bla);
-}
-
 function isMobileFunc() {
 	if (screen.width <= 760) {
 		return true;
@@ -74,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
@@ -149,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

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/main.js

@@ -14,13 +14,14 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
-import { faArrowDown, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight } 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,
+    faArrowDown,
+    faArrowRight,
 	faDiscord,
 	faTwitter,
 	faTelegram,
@@ -29,7 +30,9 @@ library.add(
 	faCaretLeft,
 	faCaretRight,
 	faBars,
-	faAnglesRight
+	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,17 +33,48 @@ const router = createRouter({
 			name: "Test",
 			component: () => import("../views/TestView.vue"),
 		},
-		{
-			path: "/walletconnect",
-			name: "WalletConnect",
-			component: () => import("../views/WalletConnectView.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/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/WalletConnectView.vue

@@ -1,223 +0,0 @@
-<template>
-    {{ activeWallet }}
-    {{ fromAddressWC }}
-    <div class="connect-overview" v-if="!activeWallet && !fromAddressWC">
-        <div v-for="wallet in wallets">
-            <img :src="wallet.icon" :alt="wallet.name" @click="connectWallet($event, wallet)">
-        </div>
-    </div>
-    <div v-else>
-        <button @click="disconnectWallet">disconnect</button>
-    </div>
-</template>
-
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { WalletConnectModalSign } from "@walletconnect/modal-sign-html";
-import {
-	EthereumProvider,
-	OPTIONAL_EVENTS,
-	REQUIRED_EVENTS,
-	REQUIRED_METHODS,
-	OPTIONAL_METHODS,
-} from "@walletconnect/ethereum-provider";
-
-import Web3 from "web3";
-
-// const modal = new WalletConnectModal({
-// 	projectId: "d8e5ecb0353c02e21d4c0867d4473ac5",
-// 	chains: ["goerli"],
-// });
-
-const activeWallet = ref(null);
-const fromAddressWC = ref(null);
-const provider = ref(null);
-const wallets = [
-	{
-		name: "MetaMask",
-		icon: "https://cdn.iconscout.com/icon/free/png-512/metamask-2728406-2261817.png",
-	},
-	{
-		name: "WalletConnect",
-		icon: "https://time.com/img/icons/wallet-connect.png",
-	},
-];
-
-const disableConnectButton = ref(false);
-// const web3Modal = new WalletConnectModalSign({
-// 	projectId,
-// 	metadata: {
-// 		name: "Bloodline-App",
-// 		description: "TODO Bloodline Description",
-// 		url: "https://gitea.loseyourip.com/",
-// 		icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
-// 	},
-// });
-
-onMounted(async () => {
-	const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
-	const showQrModal = true;
-
-	const metadata = {
-		name: "Bloodline-App",
-		description: "TODO Bloodline Description",
-		url: "https://gitea.loseyourip.com/",
-		icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
-	};
-	provider.value = await EthereumProvider.init({
-		projectId, // REQUIRED your projectId
-		chains: [1], // chains added to required namespaces
-		optionalChains: [5], // chains added to optional namespaces
-		showQrModal, // REQUIRED set to "true" to use @walletconnect/modal
-		REQUIRED_METHODS, // REQUIRED ethereum methods
-		OPTIONAL_METHODS, // OPTIONAL ethereum methods
-		REQUIRED_EVENTS, // REQUIRED ethereum events
-		OPTIONAL_EVENTS, // OPTIONAL ethereum events
-		// rpcMap, // OPTIONAL rpc urls for each chain
-		metadata, // OPTIONAL metadata of your app
-		// qrModalOptions, // OPTIONAL - `undefined` by default, see https://docs.walletconnect.com/2.0/web3modal/options
-	});
-	console.log("provider.value", provider.value);
-	if (provider.value.accounts.length > 0) {
-		fromAddressWC.value = provider.value.accounts[0];
-	} else {
-		fromAddressWC.value = null;
-	}
-});
-
-async function disconnectWallet() {
-	activeWallet.value = null;
-	fromAddressWC.value = null;
-	provider.value.disconnect();
-}
-
-async function connectWallet(event, wallet) {
-	try {
-		disableConnectButton.value = true;
-		if (wallet.name === "MetaMask") {
-			window.ethereum
-				.request({ method: "eth_requestAccounts" })
-				.then((data) => {
-					console.log("data", data);
-					activeWallet.value = { ...wallet, address: data };
-				})
-				.catch((error) => {
-					if (error.code === 4001) {
-						// EIP-1193 userRejectedRequest error
-						console.log("Please connect to MetaMask.");
-					} else {
-						console.error(error);
-					}
-				});
-		} else if (wallet.name === "WalletConnect") {
-			const methods = [
-				"eth_signTypedData",
-				"eth_signTypedData_v4",
-				"eth_sign",
-			];
-			const optionalMethods = [];
-			const events = [];
-
-			console.log("OPTIONAL_EVENTS", OPTIONAL_EVENTS);
-			console.log("REQUIRED_EVENTS", REQUIRED_EVENTS);
-			console.log("REQUIRED_METHODS", REQUIRED_METHODS);
-			console.log("OPTIONAL_METHODS", OPTIONAL_METHODS);
-
-			console.log("provider", provider.value);
-			// await provider.value.connect();
-			await provider.value.enable();
-			provider.value.on("accountsChanged", function (account) {
-				console.log("accountschanged", { account });
-				fromAddressWC.value = account;
-			});
-			const result = await provider.value.request({
-				method: "eth_requestAccounts",
-			});
-
-			console.log("result", result);
-			fromAddressWC.value = result[0];
-			// const session = await web3Modal.connect({
-			// 	requiredNamespaces: {
-			// 		eip155: {
-			// 			methods: ["eth_sendTransaction", "personal_sign"],
-			// 			chains: ["eip155:1"],
-			// 			events: ["chainChanged", "accountsChanged"],
-			// 		},
-			// 	},
-			// });
-			// console.log("session", session);
-			// const web3 = new Web3(session);
-			// console.log("web3", web3);
-			// try {
-			// 	// console.log("web3Modal", web3Modal);
-			// 	// var test = await web3Modal.request({
-			// 	// 	method: "eth_requestAccounts",
-			// 	// });
-			// 	// console.log("test", test);
-
-			// 	console.log("getAccounts");
-			// 	const accounts = await web3.eth.getAccounts();
-			// 	console.log("Got accounts", accounts);
-			// } catch (error) {
-			// 	console.log("error", error);
-			// }
-			// // MetaMask does not give you all accounts, only the selected account
-			// const fromAddress = session.namespaces.eip155.accounts[0].slice(9);
-			// console.log("Web3 instance is", web3);
-			// try {
-			// 	var balance = web3.eth.getBalance(fromAddress);
-			// 	console.log("balance", balance);
-			// } catch (error) {
-			// 	console.log("error", error);
-			// }
-			// // var accounts = await web3.eth.getAccounts();
-			// console.log("accounts", accounts);
-			// var userAccount = accounts[0];
-			// console.log("userAccount", userAccount);
-			// session.on("accountsChanged", (accounts) => {
-			// 	console.log("ACCOUNTS CHANGED" + accounts[0]);
-			// });
-		}
-	} catch (error) {
-	} finally {
-		disableConnectButton.value = false;
-	}
-}
-
-async function onConnect() {
-	try {
-		disableConnectButton.value = true;
-		const session = await web3Modal.connect({
-			requiredNamespaces: {
-				eip155: {
-					methods: ["eth_sendTransaction", "personal_sign"],
-					chains: ["eip155:1"],
-					events: ["chainChanged", "accountsChanged"],
-				},
-			},
-		});
-		console.info(session);
-	} catch (err) {
-		console.error(err);
-	} finally {
-		disableConnectButton.value = false;
-	}
-}
-
-async function disconnect() {
-	modal.closeModal();
-}
-</script>
-
-<style lang="sass">
-.connect-overview
-    display: flex
-    div
-        background-color: black
-        width: 100px
-        height: auto
-        img
-            width: 100%
-            height: auto
-</style>