cycleview

package.json

@@ -14,17 +14,13 @@
 		"@fortawesome/free-solid-svg-icons": "^6.4.0",
 		"@fortawesome/vue-fontawesome": "^3.0.3",
 		"@wagmi/core": "^1.3.8",
-        "@walletconnect/ethereum-provider": "^2.9.1",
-        "@walletconnect/modal": "^2.6.0",
-        "@walletconnect/modal-sign-html": "^2.6.0",
-        "@web3modal/html": "^2.7.0",
 		"abi-decoder": "^2.4.0",
 		"ethers": "^6.6.3",
 		"pinia": "^2.0.36",
 		"pinia-plugin-persistedstate": "^3.1.0",
 		"sass": "^1.62.1",
 		"swiper": "^9.4.1",
-        "viem": "^1.4.1",
+		"viem": "^1.5.4",
 		"vue": "^3.3.2",
 		"vue-router": "^4.2.0",
 		"wagmi": "^1.3.9",

src/App.vue

@@ -4,7 +4,6 @@ import { storeToRefs } from "pinia";
 
 import Navbar from "./components/Navbar.vue";
 import { useWalletStoreV2 } from "@/stores/walletV2";
-const walletStore = useWalletStoreV2();
 import { useTokenStore } from "@/stores/tokens";
 import { useContractStore } from "@/stores/contracts";
 import { useMemeburnerStore } from "@/stores/memeburner";
@@ -15,7 +14,15 @@ import { useRoundsStore } from "@/stores/rounds";
 import SlideoutPanel from "./components/SlideoutPanel.vue";
 import ConnectWallet from "./components/ConnectWallet.vue";
 
-import { watchAccount, getPublicClient, getWalletClient } from "@wagmi/core";
+import {
+	watchAccount,
+	watchNetwork,
+	watchContractEvent,
+	getAccount,
+	getNetwork,
+	getPublicClient,
+	getWalletClient,
+} from "@wagmi/core";
 
 const tokenStore = useTokenStore();
 const contractStore = useContractStore();
@@ -23,17 +30,21 @@ const memeBurnerStore = useMemeburnerStore();
 const rewardLockerStore = useRewardLockerStore();
 const multiCallStore = useMultiCallStore();
 const roundsStore = useRoundsStore();
+const walletStore = useWalletStoreV2();
 const { memeBurner, token } = storeToRefs(tokenStore);
 const { list } = storeToRefs(contractStore);
 const isMobile = ref(false);
 const showPanel = ref(false);
 const eventWatch = ref(null);
+const netWorkEvent = ref(null);
+const memeSacrificedEvent = ref(null);
 
 isMobile.value = isMobileFunc();
 onUnmounted(() => {
 	window.removeEventListener("resize", handleWindowSizeChange);
 
 	eventWatch.value();
+	netWorkEvent.value();
 	console.log("unsubscribe");
 });
 const handleWindowSizeChange = () => {
@@ -59,8 +70,8 @@ onMounted(async () => {
 	handleWindowSizeChange();
 
 	// initContracts
-	await walletStore.init();
-	// await tokenStore.init();
+	// await walletStore.init();
+	// await tokenStore.initV2();
 	// await memeBurnerStore.init();
 	// await rewardLockerStore.init();
 	// await memeBurnerStore.init();
@@ -68,33 +79,63 @@ onMounted(async () => {
 	//Memeburner Contract
 
 	//init
-	// roundsStore.currentRound = parseInt(
-	// 	await memeBurnerStore.getCurrentRound()
-	// );
+	// roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
 	// console.log("roundsStore.currentRound", roundsStore.currentRound);
 	// roundsStore.activeRound = roundsStore.currentRound;
-	// await roundsStore.fillRound(roundsStore.activeRound);
+	await roundsStore.fillRound(roundsStore.activeRound);
 
 	//events
 	eventWatch.value = watchAccount(async (account) => {
 		console.log("account123", account);
 		const publicClient = getPublicClient();
 		console.log("publicClient", publicClient);
-		var walletClient = await getWalletClient();
+
+		// {chainId: }
 		console.log("walletClient", walletClient);
 		if (account.address) {
 			walletStore.address = account.address;
 			walletStore.connected = true;
+			let chainObject = walletStore.chain;
+			if (!walletStore.chain) {
+				const { chain, chains } = getNetwork();
+				chainObject = chain;
+			}
+			var walletClient = await getWalletClient({
+				chainId: chainObject.id,
+			});
+			walletStore.walletClient = walletClient;
+			await memeBurnerStore.init();
 		} else {
 			walletStore.address = null;
 			walletStore.connected = false;
+			walletStore.walletClient = null;
 		}
 	});
+
+	netWorkEvent.value = watchNetwork((network) => {
+		console.log("network123", network);
+		if (network.chain) {
+			walletStore.chain = network.chain;
+		}
+	});
+
+	memeSacrificedEvent.value = watchContractEvent(
+		{
+			address: memeBurnerStore.config.contractAddress,
+			abi: memeBurnerStore.config.abi,
+			eventName: "MemeSacrificed",
+		},
+		async (log) => {
+			console.log("memeSacrificedEvent", log);
+			const token = log[0].args.sacrificedToken;
+			await roundsStore.updateCurrentRound(token);
+		}
+	);
 });
 </script>
 
 <template>
-	<navbar @show-panel="((value) => showPanel = value)"/>
+	<navbar @show-panel="(value) => (showPanel = value)" />
 	<slideout-panel v-model="showPanel">
 		<connect-wallet></connect-wallet>
 	</slideout-panel>

src/assets/sass/main.sass

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

src/components/ConnectWallet.vue

@@ -1,15 +1,18 @@
 <template>
 	<h3>Connect Wallet</h3>
-    <div class="connectors-wrapper">
-        <div class="connectors-element" v-for="connector in walletStore.connectors" @click="connectWallet(connector)">
+	<div class="connectors-wrapper" v-if="!walletStore.connected">
+		<div
+			class="connectors-element"
+			v-for="connector in walletStore.config?.connectors"
+			@click="connectWallet(connector)"
+		>
 			<div class="connector-icon">
-                <img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`">
+				<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
 			</div>
 			<div class="connector-name">{{ connector.name }}</div>
 		</div>
 	</div>
-    <div @click="disconnectWallet">disconnect</div>
-    <div @click="getWalletClientTest">getwalletclient</div>
+	<div class="btn btn-immortal" v-else @click="disconnectWallet">disconnect</div>
 	<div>Connected: {{ walletStore.connected }}</div>
 </template>
 
@@ -28,7 +31,6 @@ import {
 	disconnect,
 	InjectedConnector,
 	watchAccount,
-	getWalletClient,
 } from "@wagmi/core";
 
 const walletStore = useWalletStoreV2();
@@ -41,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: [
@@ -75,34 +81,21 @@ const instance = getCurrentInstance();
 async function disconnectWallet() {
 	console.log("disconnectWallet");
 	try {
+		instance.parent.emit("update:modelValue", false);
 		await disconnect();
+		// walletStore.connected = false;
+		// walletStore.address = null;
 	} catch (error) {
 		console.log("error", error);
 	}
 }
 
-async function getWalletClientTest() {
-	const walletClient = await getWalletClient();
-	console.log("walletClient", walletClient);
-	const contract = getContract({
-		address: Meme1Json.contractAddress,
-		abi: Meme1Json.abi,
-		walletClient,
-	});
-	const result = await contract.read.totalSupply();
-	console.log("result", result);
-
-	// 	console.log("obj", obj);
-	// });
-}
-
 async function connectWallet(connector) {
 	instance.parent.emit("update:modelValue", false);
 	await walletStore.connectWallet(toRaw(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 =
-		window.pageYOffset || document.documentElement.scrollTop;
+	const currentScrollPosition = 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

@@ -154,7 +154,7 @@ async function getRewardsFor(e) {
 		return;
 	}
 	console.log("activeToken.value.decimals", activeToken.value.decimals);
-	const rewardsForResult = await memeburnerStore.getRewardsFor(
+	const rewardsForResult = await memeburnerStore.getRewardFor(
 		BigInt(e.target.value * Math.pow(10, activeToken.value.decimals))
 	);
 	// var test = await memeburnerStore.getRewardsFor(10000);
@@ -167,7 +167,7 @@ async function getRewardsFor(e) {
 		Math.pow(10, tokenStore.memeToken.decimals)
 	);
 	output.value =
-		rewardsForResult / Math.pow(10, tokenStore.memeToken.decimals);
+		rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
 }
 
 async function addTokens(value) {

src/helper/helper.js

@@ -6,7 +6,8 @@ export function getImageUrl(url) {
 export function getPercentage(amount, goal) {
     console.log("amount", amount);
     console.log("goal", goal);
-    return ((amount / goal) * 100).toFixed(2);
+
+    return ((Number(amount) / Number(goal)) * 100).toFixed(2);
 }
 
 

src/main.js

@@ -14,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,
+    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/memeburner.js

@@ -3,78 +3,88 @@ import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
 import { useTokenStore } from "./tokens";
 import { useMultiCallStore } from "./multicall";
 import { useWalletStore } from "./wallet";
+import { useWalletStoreV2 } from "./walletV2";
 import { useRoundsStore } from "@/stores/rounds";
 
+import { multicall, getContract, fetchToken, waitForTransaction } from "@wagmi/core";
+
+
 export const useMemeburnerStore = defineStore("memeburner", {
 	state: () => ({
 		config: MemeBurnerJson,
 		contract: null,
 		loading: false,
-        
 	}),
 	getters: {},
 	actions: {
 		async init() {
 			console.log("-----------init memeburner-------------");
-            const walletStore = useWalletStore();
-            const roundsStore = useRoundsStore();
-            
-            this.contract = new walletStore.web3.eth.Contract(this.config.abi, this.config.contractAddress);
-            
-
-            const websocketMemeBurner = new walletStore.web3socket.eth.Contract(
-				this.config.abi,
-				this.config.contractAddress
-			);
-			websocketMemeBurner.events
-				.MemeSacrificed()
-				.on("data", async (event) => {
-					console.log("sacrificedAmount", event.returnValues.sacrificedAmount);
-					console.log("sacrificedToken", event.returnValues.sacrificedToken);
-					await roundsStore.updateCurrentRound(
-						event.returnValues.sacrificedToken,
-						event.returnValues.sacrificedAmount
-					);
-				})
-				.on("error", (error) => console.log("MemeSacrificederror", error));
+			const walletStore = useWalletStoreV2();
+			// const roundsStore = useRoundsStore();
+            console.log("walletStore.walletClient", walletStore.walletClient);
+			// this.contract = new walletStore.web3.eth.Contract(this.config.abi, this.config.contractAddress);
+			this.contract = getContract({
+				address: this.config.contractAddress,
+                abi: this.config.abi,
+                walletClient: walletStore.walletClient || walletStore.publicClient,
+            });
+            console.log("this.contract", this.contract);
+			// const websocketMemeBurner = new walletStore.web3socket.eth.Contract(
+			// 	this.config.abi,
+			// 	this.config.contractAddress
+			// );
+			// websocketMemeBurner.events
+			// 	.MemeSacrificed()
+			// 	.on("data", async (event) => {
+			// 		console.log("sacrificedAmount", event.returnValues.sacrificedAmount);
+			// 		console.log("sacrificedToken", event.returnValues.sacrificedToken);
+			// 		await roundsStore.updateCurrentRound(
+			// 			event.returnValues.sacrificedToken,
+			// 			event.returnValues.sacrificedAmount
+			// 		);
+			// 	})
+			// 	.on("error", (error) => console.log("MemeSacrificederror", error));
 		},
-		async getRewardsFor(amount) {
+		async getRewardFor(amount) {
 			const tokenStore = useTokenStore();
-			var rewards = await this.contract.methods
-				.getRewardFor(tokenStore.activeToken.contractAddress, amount)
-				.call();
+			// var rewards = await this.contract.methods
+			// 	.getRewardFor(tokenStore.activeToken.contractAddress, amount)
+			// 	.call();
+            const rewards = await this.contract.read.getRewardFor([tokenStore.activeToken.contractAddress, amount]);
+            console.log("rewards", rewards);
 			return rewards;
 		},
 		async getCurrentRound() {
-			return await this.contract.methods.currentRound().call();
+			return await this.contract.read.currentRound();
 		},
 		async getGoal(roundnumber) {
-			return await this.contract.methods.rounds(roundnumber).call();
+			return await this.contract.read.rounds([roundnumber]);
 		},
 		//returns participated, amount achieved
 		async getSacrificedMeme(roundnumber, tokenAddress) {
-			return await this.contract.methods.getSacrificedMeme(roundnumber, tokenAddress).call();
+			return await this.contract.read.getSacrificedMeme([roundnumber, tokenAddress]);
 		},
 		async getAmountToReachGoal(tokenAddress) {
-            return await this.contract.methods.getAmountToReachGoal(tokenAddress).call();
+			return await this.contract.read.getAmountToReachGoal([tokenAddress]);
 		},
 		async getSacrificedRound(roundnumber) {
 			console.log("getSacrificedRound", roundnumber);
 			const tokenStore = useTokenStore();
-			const calls = [];
-			// const calls1 = [];
+			const contracts = [];
 			for (let index = 0; index < tokenStore.token.length; index++) {
 				const token = tokenStore.token[index];
 				console.log("token.contractAddress", token.contractAddress);
 				console.log("roundnumber", roundnumber);
-				var test = await this.getSacrificedMeme(roundnumber, token.contractAddress);
-                console.log(token.name, test);
-                calls.push(this.contract.methods.getSacrificedMeme(roundnumber, token.contractAddress));
-                // calls1.push(this.contract.methods.getAmountToReachGoal(token.contractAddress));
+				// contracts.push(this.contract.methods.getSacrificedMeme(roundnumber, token.contractAddress));
+				contracts.push({ ...this.contract, functionName: "getSacrificedMeme", args: [roundnumber, token.contractAddress] });
 			}
-			console.log("this.contract", this.contract);
-			const multicallStore = useMultiCallStore();
-			return await multicallStore.aggregate(calls);
+			// console.log("this.contract", this.contract);
+			// const multicallStore = useMultiCallStore();
+			// return await multicallStore.aggregate(calls);
+            const data = await multicall({
+				contracts,
+            });
+            return data;
 		},
 		async sacrificeMeme(amount) {
 			const walletStore = useWalletStore();
@@ -87,10 +97,13 @@ export const useMemeburnerStore = defineStore("memeburner", {
 				}
 				this.loading = true;
 				const amountDecimal = BigInt(amount * Math.pow(10, tokenStore.activeToken.decimals));
-				var reward = await this.contract.methods
-					.sacrificeMeme(tokenStore.activeToken.contractAddress, amountDecimal)
-					.send({ from: walletStore.address });
-				console.log("reward", reward);
+                console.log("this.contract", this.contract);
+				var hash = await this.contract.write
+					.sacrificeMeme([tokenStore.activeToken.contractAddress, amountDecimal])
+                console.log("hash", hash);
+                const data = await waitForTransaction({
+					hash: hash,
+                });    
                 tokenStore.activeToken.allowance = await tokenStore.allowance();
 			} catch (error) {
 				console.error(error);
@@ -99,8 +112,7 @@ export const useMemeburnerStore = defineStore("memeburner", {
 			}
 		},
 		async getGoalInBLD(roundNumber) {
-			return await this.contract.methods.getGoalInBLD(roundNumber).call();
-            
-        }
+			return await this.contract.read.getGoalInBLD([roundNumber]);
+		},
 	},
 });

src/stores/rewardlocker.js

@@ -3,7 +3,10 @@ import RewardLockerJson from "@/assets/contracts/RewardLocker.json";
 import { useTokenStore } from "./tokens";
 import { useMultiCallStore } from "./multicall";
 import { useWalletStore } from "./wallet";
+import { useWalletStoreV2 } from "./walletV2";
 import { ethers } from "ethers";
+import { multicall, getContract } from "@wagmi/core";
+
 
 export const useRewardLockerStore = defineStore("rewardlocker", {
 	state: () => ({
@@ -15,8 +18,13 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 	actions: {
 		async init() {
             console.log("-----------init rewardlocker-------------");
-            const walletStore = useWalletStore();
-            this.contract = new walletStore.web3.eth.Contract(this.config.abi, this.config.contractAddress);
+            const walletStore = useWalletStoreV2();
+            this.contract = getContract({
+				address: this.config.contractAddress,
+				abi: this.config.abi,
+				walletClient: walletStore.walletClient || walletStore.publicClient,
+			});
+            // this.contract = new walletStore.web3.eth.Contract(this.config.abi, this.config.contractAddress);
 		},
 		/*
 		 * @param {*} walletAddress
@@ -25,37 +33,43 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		 * @returns Rewards for specific token and specific round
 		 */
 		async getRewards(walletAddress, roundNumber, tokenAddress) {
-			return await this.contract.methods.rewards(walletAddress, roundNumber, tokenAddress).call();
+			return await this.contract.read.rewards([walletAddress, roundNumber, tokenAddress]);
 		},
 		async getRewardsForAllToken(roundNumber) {
 			console.log("getRewardsForAllToken");
 			const tokenStore = useTokenStore();
-			const walletStore = useWalletStore();
-			const calls = [];
+			const walletStore = useWalletStoreV2();
+			const contracts = [];
 			for (let index = 0; index < tokenStore.token.length; index++) {
                 const token = tokenStore.token[index];
-				calls.push(this.contract.methods.rewards(walletStore.address, roundNumber, token.contractAddress));
+				// calls.push(this.contract.methods.rewards(walletStore.address, roundNumber, token.contractAddress));
+				contracts.push({
+					...this.contract,
+					functionName: "rewards",
+					args: [walletStore.address, roundNumber, token.contractAddress],
+				});
             }
-			const multicallStore = useMultiCallStore();
-			return await multicallStore.aggregate(calls);
+            const data = await multicall({
+                contracts,
+            });
+			// const multicallStore = useMultiCallStore();
+			return data
 		},
 		async getSacrificedTokenCoefficient(roundNumber, sacrificedToken) {
-			return await this.contract.methods.getSacrificedTokenCoefficient(roundNumber, sacrificedToken).call();
+			return await this.contract.read.getSacrificedTokenCoefficient([roundNumber, sacrificedToken]);
 		},
 		async lastCompletedRound() {
-			return await this.contract.methods.lastCompletedRound().call();
+			return await this.contract.read.lastCompletedRound();
 		},
         async claim(round) {
-			const walletStore = useWalletStore();
+			const walletStore = useWalletStoreV2();
 			// return await this.contract.methods.claim(round).call();
             console.log(this.contract.methods.claim(round));
-            return await this.contract.methods.claim(round).send({from: walletStore.address, to: this.contractAddress});
+            // return await this.contract.methods.claim(round).send({from: walletStore.address, to: this.contractAddress});
+            return await this.contract.write.claim([round]);
 		},
 		async getTotalRewardsOf(address, rounds) {
-			return await this.contract.methods.getTotalRewardsOf(address, rounds).call();
+			return await this.contract.read.getTotalRewardsOf([address, rounds]);
 		},
-        async stakeToBeSecured(amount, deadline, v, r, s) {
-            return await this.contract.methods.stakeToBeSecured(amount, deadline, v,r,s)
-        }
 	},
 });

src/stores/rounds.js

@@ -3,6 +3,8 @@ import { useMemeburnerStore } from "./memeburner";
 import { useTokenStore } from "./tokens";
 import { useRewardLockerStore } from "./rewardlocker";
 import { useWalletStore } from "./wallet";
+import { useWalletStoreV2 } from "./walletV2";
+import { multicall } from "@wagmi/core";
 
 
 export const useRoundsStore = defineStore("rounds", {
@@ -21,44 +23,75 @@ export const useRoundsStore = defineStore("rounds", {
         async init() {
             //fill initial round
         },
-        async updateCurrentRound(sacrificedToken, sacrificedAmount) {
+        async loadRewardsRounds() {
+            const walletStore = useWalletStoreV2();
+            const rewardLockerStore = useRewardLockerStore();
+
+            console.log("this.currentRound", this.currentRound);
+            const contracts = []
+            for (let index = 0; index < this.currentRound; index++) {
+                console.log("load round: " + index);
+                // await this.fillRound(index)
+
+                contracts.push({
+					...rewardLockerStore.contract,
+					functionName: "getTotalRewardsOf",
+					args: [walletStore.address, [index +1]],
+				});
+            }
+
+            const data = await multicall({
+				contracts,
+            });
+            console.log("data123abc", data);
+            // var test = await rewardLockerStore.getTotalRewardsOf(walletStore.address, rounds)
+            for (let index = 0; index < data.length; index++) {
+                const element = data[index];
+                if (!this.rounds[index]) {
+                    this.rounds[index] = {};
+                }
+                this.rounds[index].round = index + 1
+                this.rounds[index].rewards_total = element.result
+            }
+        },
+        async updateCurrentRound(sacrificedToken) {
             const tokenStore = useTokenStore();
             const memeBurnerStore = useMemeburnerStore();
-            var data = await memeBurnerStore.getSacrificedRound(this.currentRound)
+            var data = await memeBurnerStore.getSacrificedRound(this.currentRound);
             console.log("data123", data);
             var tokenIndex = this.rounds[this.currentRound].token.findIndex((tokenData) => tokenData.contractAddress === sacrificedToken);
-            this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex][1];
+            this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex].result[1];
 
         },
-        async fillRound() {
+        async fillRound(roundNumber) {
             console.log("fillRound");
             const memeBurnerStore = useMemeburnerStore();
             const tokenStore = useTokenStore();
-            const walletStore = useWalletStore();
+            const walletStore = useWalletStoreV2();
             const rewardLockerStore = useRewardLockerStore();
 
             // if (this.activeRound === this.currentRound) {
             //     console.log("activeRound is not completed");
             // } else
-                if (!this.rounds[this.activeRound]) {
+            if (!this.rounds[roundNumber]?.goal) {
                 console.log("round not filled --> fill round");
                 console.log("vor error");
-                    var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
+                var data = await memeBurnerStore.getSacrificedRound(roundNumber)
                 let rewardData = null;
-                    if (await walletStore.isConnected()) {
-						rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
+                if (walletStore.connected) {
+                    rewardData = await rewardLockerStore.getRewardsForAllToken(roundNumber);
                 } 
                 console.log("rewardData123", rewardData);
                 
-                    var goal = await memeBurnerStore.getGoal(this.activeRound);
-                
+                var goal = await memeBurnerStore.getGoal(roundNumber);
+                console.log("goal", goal);
                 var tokenArray = []
-                var rewards_clan = BigInt(0);
-                var rewards_sacrifice = BigInt(0);
+                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);
                     
                     
 
@@ -66,31 +99,33 @@ export const useRoundsStore = defineStore("rounds", {
                     tokenData.contractAddress = token.contractAddress;
                     tokenData.vamplogo = token.vamp.logo;
                     tokenData.vampname = token.vamp.name;
-                    tokenData.amount = data[index][1];
+                    tokenData.amount = data[index].result[1];
                     tokenData.getAmountToReachGoal= await memeBurnerStore.getAmountToReachGoal(token.contractAddress);
-                    if (this.currentRound !== this.activeRound && await walletStore.isConnected()) {
-						const clanwin = BigInt((testcoef / 10000 - 1) * rewardData[index]);
-						const sacrificeRewards = BigInt(rewardData[index]) - clanwin;
-						tokenData.rewards_ges = rewardData[index];
-						tokenData.rewards_clan = clanwin;
-						tokenData.rewards_sacrifice = sacrificeRewards;
-						rewards_clan = rewards_clan + BigInt(clanwin / BigInt(Math.pow(10, token.decimals)));
+                    if (this.currentRound !== roundNumber && walletStore.connected) {
+                        const clanwin = (Number(testcoef) / 10000 - 1) * Number(rewardData[index].result);
+                        const sacrificeRewards = Number(rewardData[index].result) - clanwin;
+
+                        tokenData.rewards_ges = BigInt(rewardData[index].result);
+                        tokenData.rewards_clan = BigInt(clanwin);
+                        tokenData.rewards_sacrifice = BigInt(sacrificeRewards);
+
+                        rewards_clan = rewards_clan + (clanwin / Math.pow(10, token.decimals));
                         rewards_sacrifice =
-							rewards_sacrifice + BigInt(sacrificeRewards / BigInt(Math.pow(10, token.decimals)));
+                            rewards_sacrifice + sacrificeRewards / Math.pow(10, token.decimals);
                     }
                     tokenArray.push(tokenData);
                 }
-                    
-                const goalInBLD = await memeBurnerStore.getGoalInBLD(this.activeRound);
-                this.rounds[this.activeRound] = {
-                    goal: goal.goal,
-                    goalInBLD: goalInBLD /Math.pow(10, tokenStore.memeToken.decimals),
-					expirationTimestamp: goal.expirationTimestamp,
-					rewards_clan: rewards_clan,
-                    rewards_sacrifice: rewards_sacrifice,
-                    rewards_total: rewards_clan + rewards_sacrifice,
+                const goalInBLD = await memeBurnerStore.getGoalInBLD(roundNumber);
+                this.rounds[roundNumber] = {
+                    goal: goal[0],
+                    goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
+                    expirationTimestamp: goal[1],
+                    rewards_clan: BigInt(rewards_clan),
+                    rewards_sacrifice: BigInt(rewards_sacrifice),
+                    rewards_total: BigInt(rewards_clan + rewards_sacrifice),
                     token: tokenArray,
                 };
+                console.log("this.rounds[roundNumber]", this.rounds[roundNumber]);
             } else {
                 console.log("round already filled");
             }

src/stores/tokens.js

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { markRaw } from "vue";
 import Web3 from "web3";
 import { useWalletStore } from "./wallet";
+import { useWalletStoreV2 } from "./walletV2";
 import { useContractStore } from "./contracts";
 import { ethers } from "ethers";
 import { useMemeburnerStore } from "./memeburner";
@@ -9,6 +10,8 @@ import Meme1Json from "@/assets/contracts/Meme1.json";
 import Meme2Json from "@/assets/contracts/Meme2.json";
 import MemeToken from "@/assets/contracts/MemeToken.json";
 import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
+import { multicall, getContract, fetchToken } from "@wagmi/core";
+
 
 export const useTokenStore = defineStore("token", {
 	state: () => ({
@@ -66,43 +69,74 @@ export const useTokenStore = defineStore("token", {
 	}),
 	getters: {},
 	actions: {
-		async init() {
+		async initV2() {
             console.log("-----------init token-------------");
-			const walletStore = useWalletStore();
+            const contracts = [];
+            const walletStore = useWalletStoreV2();
 			for (let index = 0; index < this.token.length; index++) {
 				const token = this.token[index];
-				token.contract = new walletStore.web3.eth.Contract(token.abi, token.contractAddress);
-				token.decimals = parseInt(await token.contract.methods.decimals().call());
+                token.contract = getContract({
+					address: token.contractAddress,
+					abi: token.abi,
+					WalletClient: walletStore.walletClient || walletStore.publicClient,
+				});
+                contracts.push({...token.contract, functionName: "decimals"})
+                
             }
 
+            
             //MemeToken init
-            this.memeToken.contract = new walletStore.web3.eth.Contract(
-                this.memeToken.config.abi,
-                this.memeToken.config.contractAddress
-            );
-            this.memeToken.decimals = parseInt(await this.memeToken.contract.methods.decimals().call());
+            this.memeToken.contract = getContract({
+				address: this.memeToken.config.contractAddress,
+				abi: this.memeToken.config.abi,
+				PublicClient: walletStore.publicClient,
+				WalletClient: walletStore.walletClient,
+			});
+                contracts.push({ ...this.memeToken.contract, functionName: "decimals" });
+
+
+             const data = await multicall({
+					contracts,
+             });
+            //multicall decimal
+            for (let index = 0; index < this.token.length; index++) {
+                const token = this.token[index];
+                token.decimals = data[index].result
+            }
+
+            this.memeToken.decimals = data[this.token.length].result;
+            
 		},
         async changeActiveToken(token) {
+            console.log("changeActiveToken");
 			this.activeToken = token;
-			const web3 = new Web3(window.ethereum);
-			this.contract = new web3.eth.Contract(token.abi, token.contractAddress);
-			const walletStore = useWalletStore();
+			// const web3 = new Web3(window.ethereum);
+			// this.contract = new web3.eth.Contract(token.abi, token.contractAddress);
+            const walletStore = useWalletStoreV2();
             if (walletStore.connected) {
+                //TODO, wenn connected, dann all diese Daten laden?
 				this.activeToken.balance = await walletStore.getTokenBalance(token);
 				this.activeToken.allowance = await this.allowance();
 			}
 		},
 		async allowance() {
 			console.log("allowance");
-			const walletStore = useWalletStore();
+			const walletStore = useWalletStoreV2();
 			const memeBurnerStore = useMemeburnerStore();
-			var allowance = await this.contract.methods
-				.allowance(walletStore.address, memeBurnerStore.config.contractAddress)
-				.call();
-			var decimals = await this.contract.methods.decimals().call();
-			console.log("decimals", decimals);
-			console.log("Math.pow(10, decimals)", Math.pow(10, decimals));
-			allowance = BigInt(allowance / Math.pow(10, decimals));
+			// var allowance = await this.contract.methods
+			// 	.allowance(walletStore.address, memeBurnerStore.config.contractAddress)
+			// 	.call();
+            console.log("this.activeToken.contract", this.activeToken.contract);
+            var allowance = await this.activeToken.contract.read.allowance([
+				walletStore.address,
+				memeBurnerStore.config.contractAddress,
+			]);
+			// var decimals = await this.contract.methods.decimals().call();
+			// console.log("decimals", decimals);
+            const decimals = this.activeToken.decimals;
+
+            allowance = BigInt(allowance / BigInt(Math.pow(10, decimals)));
+            console.log("allowance", allowance);
 			return allowance;
 		},
 		async approveToken(amount) {

src/stores/walletV2.js

@@ -9,7 +9,6 @@ import {
 	getAccount,
 	getContract,
 	connect,
-	getWalletClient,
 	disconnect,
 	InjectedConnector,
 	watchAccount,
@@ -33,9 +32,10 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 		web3: null,
         provider: null,
         client: null,
-        pubilcClient: null,
+        publicClient: null,
         walletClient: null,
-        config: null
+        config: null,
+        chain: null,
 	}),
 	getters: {},
     actions: {
@@ -50,6 +50,7 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
             );
 
+            
 			this.config = createConfig({
 				autoConnect: true,
 				connectors: [
@@ -77,7 +78,16 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				publicClient,
 				webSocketPublicClient,
             });
+            this.publicClient = publicClient;
 
+            console.log("hier123");
+             const account = getAccount();
+
+				console.log("account123abc", account);
+				if (account.address) {
+					this.address = account.address;
+					this.connected = true;
+				}
 			// await this.isConnected();
 			// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
 			// if (this.connected) {
@@ -121,47 +131,49 @@ export const useWalletStoreV2 = defineStore("walletV2", {
             // this.address = connection.account;
 		},
 		async getTokenBalance(token) {
-			const tokenStore = useTokenStore();
-			const contract = tokenStore.getTokenContract(token);
-			const result = await contract.methods.balanceOf(this.address).call();
+			// const tokenStore = useTokenStore();
+			// const contract = tokenStore.getTokenContract(token);
+			// const result = await contract.methods.balanceOf(this.address).call();
+            console.log("this.address", this.address);
+            const result = await token.contract.read.balanceOf([this.address]);
 			return result;
 		},
-		async isConnected() {
-			try {
-				this.loading = true;
-				if (!window.ethereum) {
-					console.warn("Metamask not installed"), (this.connected = false);
-					return;
-				}
-				const accounts = await window.ethereum.request({ method: "eth_accounts" });
-				if (accounts.length) {
-					this.connected = true;
-					this.address = accounts[0];
-					console.log(`You're connected to: ${accounts[0]}`);
-					// const web3 = new Web3(window.ethereum);
-					// const tokenStore = useTokenStore();
-					// console.log("tokenStore.activeToken", tokenStore.activeToken);
-					// if (tokenStore.activeToken.contractAddress) {
-					// 	tokenStore.activeToken.balance = await this.getTokenBalance(
-					// 		tokenStore.activeToken
-					// 	);
-					// 	tokenStore.activeToken.allowance = await tokenStore.allowance();
+		// async isConnected() {
+		// 	try {
+		// 		this.loading = true;
+		// 		if (!window.ethereum) {
+		// 			console.warn("Metamask not installed"), (this.connected = false);
+		// 			return;
 		// 		}
-					// tokenStore.memeBurner.contract = new web3.eth.Contract(
-					// 	tokenStore.memeBurner.config.abi,
-					// 	tokenStore.memeBurner.config.contractAddress
-					// );
-				} else {
-					console.log("Metamask is not connected");
-					this.connected = false;
-				}
-			} catch (error) {
-				console.log("error", error);
-			} finally {
-				this.loading = false;
-				return this.connected;
-			}
-		},
+		// 		const accounts = await window.ethereum.request({ method: "eth_accounts" });
+		// 		if (accounts.length) {
+		// 			this.connected = true;
+		// 			this.address = accounts[0];
+		// 			console.log(`You're connected to: ${accounts[0]}`);
+		// 			// const web3 = new Web3(window.ethereum);
+		// 			// const tokenStore = useTokenStore();
+		// 			// console.log("tokenStore.activeToken", tokenStore.activeToken);
+		// 			// if (tokenStore.activeToken.contractAddress) {
+		// 			// 	tokenStore.activeToken.balance = await this.getTokenBalance(
+		// 			// 		tokenStore.activeToken
+		// 			// 	);
+		// 			// 	tokenStore.activeToken.allowance = await tokenStore.allowance();
+		// 			// }
+		// 			// tokenStore.memeBurner.contract = new web3.eth.Contract(
+		// 			// 	tokenStore.memeBurner.config.abi,
+		// 			// 	tokenStore.memeBurner.config.contractAddress
+		// 			// );
+		// 		} else {
+		// 			console.log("Metamask is not connected");
+		// 			this.connected = false;
+		// 		}
+		// 	} catch (error) {
+		// 		console.log("error", error);
+		// 	} finally {
+		// 		this.loading = false;
+		// 		return this.connected;
+		// 	}
+		// },
 	},
 	persist: true,
 });

src/views/CycleView.vue

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

src/views/HomeView.vue

@@ -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(
-		getCurrentRoundData.value?.expirationTimestamp * 1000
-	);
+	const dateEntered = new Date(Number(getCurrentRoundData.value?.expirationTimestamp) * 1000);
 
 	if (dateEntered) {
 		var now = new Date();
@@ -153,7 +152,8 @@ function timeBetweenDates() {
 										<tr>
 											<td>Sacrifice:</td>
 											<td class="divider"></td>
-											<td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td>
+											<!-- <td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td> -->
+											<td>{{ getCurrentRoundData?.goalInBLD }} $BDL</td>
 										</tr>
 										<tr>
 											<td>Time left:</td>
@@ -171,10 +171,16 @@ function timeBetweenDates() {
 				</div>
 			</section>
 			<div class="container section-header-container">
-				<h2>Tutorial</h2>
+				<div class="tutorial-header">
+					<div class="tutorial-headline">Tutorial</div>
+					<div class="tutorial-more" @click="openTutorial = !openTutorial">
+						<font-awesome-icon v-if="openTutorial" icon="chevron-up" />
+						<font-awesome-icon v-else icon="chevron-down" />
+					</div>
+				</div>
+				<div v-if="openTutorial" class="tutorial-text">
 					When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
 					<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
-			</div>
 					<section id="tokenomics" class="container">
 						<div class="card">
 							<h2>Tokenomics</h2>
@@ -183,6 +189,13 @@ function timeBetweenDates() {
 							<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>
@@ -285,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>