rounds implemented + over all improvements

.eslintrc.cjs

@@ -1,12 +1,12 @@
 /* eslint-env node */
 
 module.exports = {
-  root: true,
+	root: true,
-  extends: [
+	extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
-    'plugin:vue/vue3-essential',
+	parserOptions: {
-    'eslint:recommended',
+		ecmaVersion: "latest",
-  ],
+	},
-  parserOptions: {
+	global: {
-    ecmaVersion: 'latest'
+		BigInt: true,
-  }
+	},
-}
+};

src/App.vue

@@ -11,20 +11,18 @@ 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";
 const tokenStore = useTokenStore();
 const contractStore = useContractStore();
 const memeBurnerStore = useMemeburnerStore();
 const rewardLockerStore = useRewardLockerStore();
 const multiCallStore = useMultiCallStore();
-const { memeBurner } = storeToRefs(tokenStore);
+const roundsStore = useRoundsStore();
+const { memeBurner, token } = storeToRefs(tokenStore);
 const { list } = storeToRefs(contractStore);
 const isMobile = ref(false);
 isMobile.value = isMobileFunc();
-
+let subscription;
-onMounted(() => {
-	window.addEventListener("resize", handleWindowSizeChange);
-	handleWindowSizeChange();
-});
 onUnmounted(() => {
 	window.removeEventListener("resize", handleWindowSizeChange);
 });
@@ -43,74 +41,107 @@ function isMobileFunc() {
 provide("isMobile", isMobile);
 
 onMounted(async () => {
+	window.addEventListener("resize", handleWindowSizeChange);
+	handleWindowSizeChange();
 	//more or less tests
 	var test = await walletStore.isConnected();
 	console.log("test", test);
 
 	let web3 = new Web3("https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN");
+	let web3socket = new Web3(
+		new Web3.providers.WebsocketProvider("wss://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN")
+	);
+	console.log("web3socket", web3socket);
+
+	//init
 
 	walletStore.web3 = web3;
-	const contract = new web3.eth.Contract(memeBurner.value.config.abi, memeBurner.value.config.contractAddress);
+	// const contract = new web3.eth.Contract(memeBurner.value.config.abi, memeBurner.value.config.contractAddress);
 	list.value.memeBurnerPublic = new web3.eth.Contract(
 		memeBurner.value.config.abi,
 		memeBurner.value.config.contractAddress
 	);
 
 	//Memeburner Contract
-	memeBurnerStore.contract = new web3.eth.Contract(
-		memeBurnerStore.config.abi,
-		memeBurnerStore.config.contractAddress
-	);
 
-	var getGoal = await memeBurnerStore.getGoal(1);
+	// var testabc = await memeBurnerStore.contract.methods
-	var getSacrificedMeme1 = await memeBurnerStore.getSacrificedMeme(1, "0x4435ABC578136e2Eca50b5EFf950F17CAF42485b");
+	// 	.getSacrificedMeme(1, "0x4435ABC578136e2Eca50b5EFf950F17CAF42485b")
-	var getSacrificedMeme2 = await memeBurnerStore.getSacrificedMeme(1, "0xa0B7b2a78dF87eDc70736f7ED9D40d86c37B533F");
+	// 	.call();
-	var blub1 = (getSacrificedMeme1.amountAchieved / getGoal) * 100;
+	// console.log("testabc", testabc);
-	var blub2 = (getSacrificedMeme2.amountAchieved / getGoal) * 100;
 
-	memeBurnerStore.contract = new web3.eth.Contract(
+	// var data = await memeBurnerStore.getSacrificedRound(1);
-		memeBurnerStore.config.abi,
+	// console.log("data", data);
-		memeBurnerStore.config.contractAddress
+	// console.log("blub1", blub1);
-	);
+	// console.log("blub2", blub2);
+	// console.log("getSacrificedMeme", getSacrificedMeme1.amountAchieved);
+	// console.log("getGoal", getGoal);
+	// console.log("memeBurnerStore.contract", memeBurnerStore.contract);
+	// console.log("list", list.value);
+	// const rounds = await contract.methods.rounds("0x0e349D42C125acA39ea58024FFC23ED0fE5feE32").call();
+	// console.log("rounds", rounds);
 
-	var testabc = await memeBurnerStore.contract.methods
+	// var claim = await rewardLockerStore.getTotalRewardsOf("0x60dd9D0e015115b9aEf61bEDCcBE1390CEEfC247", [1]);
-		.getSacrificedMeme(1, "0x4435ABC578136e2Eca50b5EFf950F17CAF42485b")
+	// console.log("claim", claim);
-		.call();
-	console.log("testabc", testabc);
 
-	multiCallStore.contract = new web3.eth.Contract(multiCallStore.config.abi, multiCallStore.config.contractAddress);
+	// var lastCompletedRound = await rewardLockerStore.lastCompletedRound();
-
+	// console.log("lastCompletedRound", lastCompletedRound);
-	var data = await memeBurnerStore.getSacrificedRound(1);
+	// var getwards = await rewardLockerStore.getRewards(
-	console.log("data", data);
+	// 	"0x60dd9D0e015115b9aEf61bEDCcBE1390CEEfC247",
-	memeBurnerStore.contract = new web3.eth.Contract(
+	// 	1,
-		memeBurnerStore.config.abi,
+	// 	"0x4435ABC578136e2Eca50b5EFf950F17CAF42485b"
-		memeBurnerStore.config.contractAddress
+	// );
-	);
+	// console.log("getwards", getwards);
-
-	console.log("blub1", blub1);
-	console.log("blub2", blub2);
-	console.log("getSacrificedMeme", getSacrificedMeme1.amountAchieved);
-	console.log("getGoal", getGoal);
-	console.log("memeBurnerStore.contract", memeBurnerStore.contract);
-	console.log("list", list.value);
-	const currentRound = await memeBurnerStore.getCurrentRound();
-	const rounds = await contract.methods.rounds("0x0e349D42C125acA39ea58024FFC23ED0fE5feE32").call();
-	console.log("currentRound", currentRound);
-	console.log("rounds", rounds);
 
+	//contracts
 	rewardLockerStore.contract = new web3.eth.Contract(
 		rewardLockerStore.config.abi,
 		rewardLockerStore.config.contractAddress
 	);
-
+	memeBurnerStore.contract = new web3.eth.Contract(
-	var lastCompletedRound = await rewardLockerStore.lastCompletedRound();
+		memeBurnerStore.config.abi,
-	console.log("lastCompletedRound", lastCompletedRound);
+		memeBurnerStore.config.contractAddress
-	var getwards = await rewardLockerStore.getRewards(
-		walletStore.address,
-		1,
-		"0x4435ABC578136e2Eca50b5EFf950F17CAF42485b"
 	);
-	console.log("getwards", getwards);
+	tokenStore.memeToken.contract = new web3.eth.Contract(
+		tokenStore.memeToken.config.abi,
+		tokenStore.memeToken.config.contractAddress
+	);
+	const websocketMemeBurner = new web3socket.eth.Contract(
+		memeBurnerStore.config.abi,
+		memeBurnerStore.config.contractAddress
+	);
+	multiCallStore.contract = new web3.eth.Contract(multiCallStore.config.abi, multiCallStore.config.contractAddress);
+
+	//init
+	roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
+	console.log("roundsStore.currentRound", roundsStore.currentRound);
+	roundsStore.activeRound = roundsStore.currentRound;
+	await roundsStore.fillRound(roundsStore.activeRound);
+
+	tokenStore.memeToken.decimals = parseInt(await tokenStore.memeToken.contract.methods.decimals().call());
+	for (let index = 0; index < token.value.length; index++) {
+		const _token = token.value[index];
+		_token.contract = new web3.eth.Contract(_token.abi, _token.contractAddress);
+		_token.decimals = parseInt(await _token.contract.methods.decimals().call());
+	}
+
+	console.log("token123", token.value);
+
+	//events
+	// var bleb = roundsStore.rounds[roundsStore.currentRound].find(
+	// 	(obj) => obj.contractAddress === "0x4435ABC578136e2Eca50b5EFf950F17CAF42485b"
+	// );
+	// console.log("roundsStore.rounds[roundsStore.currentRound]", bleb);
+	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));
 });
 </script>
 

src/components/BloodChart.vue

@@ -1,15 +1,15 @@
 <template>
-	<div class="blood-chart-wrapper">
+	<div class="blood-chart-wrapper" v-if="props.data">
-		<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
+		<div class="blood-chart-element" v-for="coin in props.data.token" :key="coin.name">
 			<div class="blood-chart-element-header">
 				<div class="blood-chart-coin">
-					<img :src="getImageUrl(coin.icon)" alt="logo" />
+					<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
 				</div>
 				<div class="blood-chart-coin-title">{{ coin.name }}</div>
 			</div>
 			<div class="blood-chart-element-body">
 				<div class="blood-chart-bar-wrapper">
-					<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">
+					<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
 						<svg
 							class="waves"
 							xmlns="http://www.w3.org/2000/svg"
@@ -39,12 +39,14 @@
 							<div><span class="dot"></span></div>
 							<div><span class="dot"></span></div>
 						</div>
-						<div class="blood-chart-bar-percentage">{{ coin.percentage }}%</div>
+						<div class="blood-chart-bar-percentage">{{ getPercentage(coin.amount, props.data.goal) }}%</div>
 					</div>
 				</div>
 			</div>
 			<div class="blood-chart-element-footer">
-				<div class="blood-chart-amount">130,4b</div>
+				<div class="blood-chart-amount">
+					{{ compactNumber(coin.amount) }}
+				</div>
 				<div class="blood-chart-coin">$BLOOD</div>
 			</div>
 		</div>
@@ -52,27 +54,34 @@
 </template>
 
 <script setup>
+import { getPercentage, compactNumber } from "@/helper/helper.js";
+const props = defineProps({
+	data: Array,
+});
+
+console.log(props.data);
+
 function getImageUrl(url) {
 	return new URL(url, import.meta.url).href;
 }
 
-const dataPoints = [
+// const dataPoints = [
-	{
+// 	{
-		name: "$PEPE",
+// 		name: "$PEPE",
-		percentage: 62.2,
+// 		percentage: 62.2,
-		icon: "/src/assets/img/token/pepevamp.png",
+// 		icon: "/src/assets/img/token/pepevamp.png",
-	},
+// 	},
-	{
+// 	{
-		name: "$SHIB",
+// 		name: "$SHIB",
-		percentage: 31.2,
+// 		percentage: 31.2,
-		icon: "/src/assets/img/token/shibvamp.png",
+// 		icon: "/src/assets/img/token/shibvamp.png",
-	},
+// 	},
-	{
+// 	{
-		name: "$ELON",
+// 		name: "$ELON",
-		percentage: 54.5,
+// 		percentage: 54.5,
-		icon: "/src/assets/img/token/elonvamp.png",
+// 		icon: "/src/assets/img/token/elonvamp.png",
-	},
+// 	},
-];
+// ];
 </script>
 
 <style lang="sass">

src/components/SacrificeToken.vue

@@ -24,9 +24,9 @@
 			<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
 				<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1">
 					<div class="sarcrifice-from-input">
-						<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" />
+						<input @input="processChange" v-model="tokenNumber" :placeholder="0" />
 						<div class="sacrifice-logo">
-							<img src="@/assets/img/vampir.png" alt="vampir" />
+							<img :src="activeToken.logo" alt="vampir" />
 						</div>
 					</div>
 					<div class="value-adder">
@@ -70,12 +70,17 @@
 						<div
 							class="btn btn-immortal"
 							v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
-							@click="approvalData = tokenStore.sacrificeToken(1)"
+							@click="approvalData = tokenStore.sacrificeToken(tokenNumber)"
 						>
 							<font-awesome-icon v-if="loading" icon="spinner" spin />
 							Sacrifce {{ activeToken.name }}
 						</div>
-						<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
+						<div
+							class="btn btn-immortal"
+							v-else
+							@click="approvalData = tokenStore.approveToken(tokenNumber)"
+						>
+							<font-awesome-icon v-if="loading" icon="spinner" spin />
 							Approve {{ activeToken.name }}
 						</div>
 					</div>
@@ -118,14 +123,23 @@ const tokenNumber = ref(0);
 const output = ref(0);
 const approvalData = ref(null);
 
-const processChange = Helper.debounce((e) => test(e));
+const processChange = Helper.debounce((e) => getRewardsFor(e));
 
-async function test(e) {
+async function getRewardsFor(e) {
-	console.log("hier", e);
+	if (!e.target.value) {
-	output.value = await tokenStore.getRewardsFor(parseInt(e.target.value));
+		output.value = 0;
+		return;
+	}
+	console.log("e.target.value * 18", e.target.value * Math.pow(10, 18));
+	const rewardsForResult = await tokenStore.getRewardsFor(
+		BigInt(e.target.value * Math.pow(10, activeToken.value.decimals))
+	);
+	output.value = rewardsForResult / Math.pow(10, tokenStore.memeToken.decimals);
 }
-function addTokens(value) {
+
+async function addTokens(value) {
 	tokenNumber.value = tokenNumber.value + value;
+	output.value = await tokenStore.getRewardsFor(parseInt(tokenNumber.value));
 }
 </script>
 
@@ -230,7 +244,7 @@ function addTokens(value) {
                 height: 45px
                 border-radius: 50%
                 @media (min-width: 992px)
-                    height: auto
+                    height: 83px
                     width: auto
         .sacrifice-to-output
             flex: 1 1 auto

src/components/TokenClaim.vue

@@ -6,9 +6,6 @@
 				<font-awesome-icon icon="fa-solid fa-plus" />
 			</div>
 			<rewards-wrapper title="Clan Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
-			<div class="claim-button">
-				<div class="btn btn-immortal">Claim</div>
-			</div>
 		</div>
 		<div class="rewards-list" v-else>
 			<rewards-wrapper
@@ -27,13 +24,33 @@
 			<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
 			<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
 		</div>
+		<div class="claim-button">
+			<div class="btn btn-immortal" @click="claimRewards">Claim</div>
+		</div>
 	</div>
 </template>
 
 <script setup>
+import { storeToRefs } from "pinia";
 import RewardsWrapper from "@/components/RewardsWrapper.vue";
-import { inject } from "vue";
+import { inject, ref, onMounted } from "vue";
+import { useRewardLockerStore } from "@/stores/rewardlocker";
+import { useWalletStore } from "@/stores/wallet";
+import { useRoundsStore } from "@/stores/rounds";
+
+const rewards = ref(0);
 const isMobile = inject("isMobile");
+const rewardLockerStore = useRewardLockerStore();
+const walletStore = useWalletStore();
+const roundStore = useRoundsStore();
+const { address } = storeToRefs(walletStore);
+const { activeRound, getCurrentRoundData } = storeToRefs(roundStore);
+
+onMounted(async () => {});
+
+function claimRewards() {
+	//todo
+}
 </script>
 
 <style lang="sass">

src/helper/helper.js

@@ -2,3 +2,17 @@
 export function getImageUrl(url) {
     return new URL(url, import.meta.url).href;
 }
+
+export function getPercentage(amount, goal) {
+    console.log("amount", amount);
+    console.log("goal", goal);
+    return ((amount / goal) * 100).toFixed(2);
+}
+
+
+export function compactNumber(number) {
+    return Intl.NumberFormat("en-US", {
+		notation: "compact",
+		maximumFractionDigits: 2,
+	}).format(parseInt(number));
+}

src/stores/memeburner.js

@@ -13,7 +13,7 @@ export const useMemeburnerStore = defineStore("memeburner", {
 		async getCurrentRound() {
 			return await this.contract.methods.currentRound().call();
 		},
-		async getGoal(roundnumber) {
+		async getGoal   (roundnumber) {
 			return await this.contract.methods.rounds(roundnumber).call();
 		},
 		//returns participated, amount achieved
@@ -21,6 +21,7 @@ export const useMemeburnerStore = defineStore("memeburner", {
 			return await this.contract.methods.getSacrificedMeme(roundnumber, tokenAddress).call();
 		},
         async getSacrificedRound(roundnumber) {
+            console.log("getSacrificedRound", roundnumber);
             const tokenStore = useTokenStore();
             const calls = [];
             for (let index = 0; index < tokenStore.token.length; index++) {

src/stores/rewardlocker.js

@@ -1,5 +1,8 @@
 import { defineStore } from "pinia";
 import RewardLockerJson from "@/assets/contracts/RewardLocker.json";
+import { useTokenStore } from "./tokens";
+import { useMultiCallStore } from "./multicall";
+import { useWalletStore } from "./wallet";
 
 export const useRewardLockerStore = defineStore("rewardlocker", {
 	state: () => ({
@@ -17,8 +20,26 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		async getRewards(walletAddress, roundNumber, tokenAddress) {
 			return await this.contract.methods.rewards(walletAddress, roundNumber, tokenAddress).call();
 		},
+        async getRewardsForAllToken(roundNumber) {   
+            console.log("getRewardsForAllToken");
+            const tokenStore = useTokenStore();
+            const walletStore = useWalletStore();
+			const calls = [];
+			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));
+			}
+			const multicallStore = useMultiCallStore();
+            return await multicallStore.aggregate(calls);
+		},
 		async lastCompletedRound() {
 			return await this.contract.methods.lastCompletedRound().call();
 		},
+		async claim(round) {
+			return await this.contract.methods.claim(round).call();
+		},
+		async getTotalRewardsOf(address, rounds) {
+			return await this.contract.methods.getTotalRewardsOf(address, rounds).call();
+		},
 	},
 });

src/stores/rounds.js

@@ -0,0 +1,64 @@
+import { defineStore } from "pinia";
+import { useMemeburnerStore } from "./memeburner";
+import { useTokenStore } from "./tokens";
+import { useRewardLockerStore } from "./rewardlocker";
+
+
+export const useRoundsStore = defineStore("rounds", {
+	state: () => ({
+        rounds: [
+        ],
+        activeRound: null,
+        currentRound: null
+	}),
+    getters: {
+        getCurrentRoundData() {
+            return this.rounds[this.activeRound];
+        }
+    },
+    actions: {
+        async updateCurrentRound(sacrificedToken, sacrificedAmount) {
+            const tokenStore = useTokenStore();
+            const memeBurnerStore = useMemeburnerStore();
+            var data = await memeBurnerStore.getSacrificedRound(this.currentRound)
+            var tokenIndex = this.rounds[this.currentRound].token.findIndex((tokenData) => tokenData.contractAddress === sacrificedToken);
+            this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex][1];
+        },
+        async fillRound() {
+            console.log("fillRound");
+            const memeBurnerStore = useMemeburnerStore();
+            const tokenStore = useTokenStore();
+            const rewardLockerStore = useRewardLockerStore();
+
+            // if (this.activeRound === this.currentRound) {
+            //     console.log("activeRound is not completed");
+            // } else
+                if (!this.rounds[this.activeRound]) {
+                console.log("round not filled --> fill round");
+                var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
+                var rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
+                var goal = await memeBurnerStore.getGoal(this.activeRound);
+                console.log("data", data);
+                var tokenArray = []
+                for (let index = 0; index < data.length; index++) {
+                    var tokenData = {};
+                    const token = tokenStore.token[index];
+                    console.log("token", token);
+                    tokenData.name = token.name;
+                    tokenData.contractAddress = token.contractAddress;
+                    tokenData.vamplogo = token.vamp.logo;
+                    tokenData.vampname = token.vamp.name;
+                    tokenData.amount = data[index][1];
+                    tokenData.rewards = rewardData[index]
+                    tokenArray.push(tokenData);
+                }
+                    this.rounds[this.activeRound] = {
+                        goal: goal, token: tokenArray
+                    }
+            } else {
+                console.log("round already filled");
+            }
+            console.log("this.rounds123", this.rounds);
+        },
+    },
+});

src/stores/tokens.js

@@ -4,6 +4,7 @@ import { useWalletStore } from "./wallet";
 import { useContractStore } from "./contracts";
 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";
 
 export const useTokenStore = defineStore("token", {
@@ -19,7 +20,7 @@ export const useTokenStore = defineStore("token", {
 				},
 				backgroundColor: "#4b8501",
 				abi: Meme1Json.abi,
-                contractAddress: Meme1Json.contractAddress,
+				contractAddress: Meme1Json.contractAddress,
 			},
 			{
 				name: "$SHIB",
@@ -52,6 +53,12 @@ export const useTokenStore = defineStore("token", {
 			allowance: null,
 		},
 		loading: false,
+        memeToken: {
+            config: {
+                abi: MemeToken.abi,
+                contractAddress: MemeToken.contractAddress
+            }
+		},
 		memeBurner: {
 			config: MemeBurnerJson,
 			contract: null,
@@ -76,30 +83,49 @@ export const useTokenStore = defineStore("token", {
 				.allowance(walletStore.address, MemeBurnerJson.contractAddress)
 				.call();
 			console.log("allowance", allowance);
+			var decimals = await this.contract.methods.decimals().call();
+			console.log("decimals", decimals);
 			return allowance;
 		},
 		async approveToken(amount) {
-			const walletStore = useWalletStore();
+			try {
-			this.loading = true;
+				console.log("amount", amount);
-			var approve = await this.contract.methods
+				this.loading = true;
-				.approve(this.memeBurner.config.contractAddress, amount)
+				const walletStore = useWalletStore();
-				.send({ from: walletStore.address });
+				var approve = await this.contract.methods
-			console.log("approve", approve);
+					.approve(this.memeBurner.config.contractAddress, amount)
-			this.loading = false;
+					.send({ from: walletStore.address });
-			return approve;
+				//todo parameter value übergeben in eth web3.utils.toHex(web3.utils.toWei(amount, 'ether'))
+
+				// .send({ from: walletStore.address, value: 0.5 });
+				console.log("approve", approve);
+				this.activeToken.allowance = await this.allowance();
+				return approve;
+			} catch (error) {
+				console.error(error);
+			} finally {
+				this.loading = false;
+			}
 		},
 		async sacrificeToken(amount) {
 			try {
+				console.log("amount", amount);
+				if (!amount || amount == 0) {
+					//todo error
+					console.error("amount is 0 or null or undefined");
+					return;
+				}
 				this.loading = true;
 				console.log("this.activeToken.", this.activeToken.contractAddress);
 				const walletStore = useWalletStore();
 				console.log("walletStore.address", walletStore.address);
 				var reward = await this.memeBurner.contract.methods
-					.sacrificeMeme(this.activeToken.contractAddress, "400000000000000000")
+					.sacrificeMeme(this.activeToken.contractAddress, amount)
 					.send({ from: walletStore.address });
 				console.log("reward", reward);
+				this.activeToken.allowance = await this.allowance();
 			} catch (error) {
-				error.log(error);
+				console.error(error);
 			} finally {
 				this.loading = false;
 			}

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, inject } from "vue";
+import { ref, computed, inject, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import SacrificeToken from "@/components/SacrificeToken.vue";
 import BloodChart from "@/components/BloodChart.vue";
@@ -7,8 +7,13 @@ import TokenClaim from "@/components/TokenClaim.vue";
 // import Web3 from "web3";
 // import { useWalletStore } from "@/stores/wallet";
 import { useTokenStore } from "@/stores/tokens";
+import { useRoundsStore } from "@/stores/rounds";
 const tokenStore = useTokenStore();
+const roundsStore = useRoundsStore();
 const { token } = storeToRefs(tokenStore);
+
+const { currentRound, activeRound, rounds } = storeToRefs(roundsStore);
+
 // Import Swiper Vue.js components
 const swiperInstance = ref();
 import { Navigation } from "swiper";
@@ -21,24 +26,25 @@ function onSwiper(swiper) {
 	swiperInstance.value = swiper;
 }
 
-const rounds = [{ round: 1 }, { round: 2 }, { round: 3 }];
+async function prevSlide() {
-const currentSlide = ref(1);
+	if (activeRound.value > 1) {
-const currentIndex = computed(() => {
+		activeRound.value--;
-	return rounds.findIndex((obj) => obj.round === currentSlide.value);
+		await roundsStore.fillRound();
-});
-
-function prevSlide() {
-	if (currentSlide.value !== rounds[0].round) {
-		currentSlide.value--;
 	}
 }
 
-function nextSlide() {
+async function nextSlide() {
-	if (currentSlide.value < rounds[rounds.length - 1].round) {
+	if (activeRound.value < currentRound.value) {
-		currentSlide.value++;
+		activeRound.value++;
+		await roundsStore.fillRound();
 	}
 }
 
+// const computedRounds = computed(() => {
+//     if()
+//     return ""
+// })
+
 // let web3 = new Web3(
 // 	"https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
 // );
@@ -79,13 +85,13 @@ function nextSlide() {
 				</swiper>
 				<div class="slider-wrapper">
 					<font-awesome-icon
-						:class="{ 'slider-prev': true, disabled: currentSlide === rounds[0].round }"
+						:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
 						@click="prevSlide"
 						:icon="['fas', 'caret-left']"
 					/>
-					<div class="slider-text">Cycle {{ currentSlide }}</div>
+					<div class="slider-text">Cycle {{ roundsStore.activeRound }}</div>
 					<font-awesome-icon
-						:class="{ 'slider-next': true, disabled: currentSlide === rounds[rounds.length - 1].round }"
+						:class="{ 'slider-next': true, disabled: currentRound === roundsStore.activeRound }"
 						@click="nextSlide"
 						:icon="['fas', 'caret-right']"
 					/>
@@ -123,7 +129,7 @@ function nextSlide() {
 							</div>
 						</div>
 						<div class="blood-chart">
-							<blood-chart></blood-chart>
+							<blood-chart :data="rounds[activeRound]"></blood-chart>
 						</div>
 						<div class="cycle-end-wrapper">
 							<div class="cycle-end-inner">

src/views/TestView.vue

@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<button @click="mintToken">mint</button>
+		<button @click="mintToken2">mint2</button>
 		<button @click="sacrificeMeme">sacrifice Meme</button>
 		<button @click="approveMeme1">approve Meme1</button>
 		<button @click="tokenStore.approveToken(MemeBurnerJson, 10)">wallet approve</button>
@@ -30,6 +31,7 @@ console.log("RewardLockerJson", RewardLockerJson);
 // );
 // console.log("balanceOf", balanceOf);
 const web3 = ref(null);
+const contractMeme2 = ref(null);
 const contractMeme1 = ref(null);
 const contractBurner = ref(null);
 
@@ -42,6 +44,7 @@ onMounted(async () => {
 	web3.value.eth.Contract.defaultAccount = accounts[0];
 
 	contractMeme1.value = new web3.value.eth.Contract(Meme1Json.abi, Meme1Json.contractAddress);
+	contractMeme2.value = new web3.value.eth.Contract(Meme2Json.abi, Meme2Json.contractAddress);
 	contractBurner.value = new web3.value.eth.Contract(MemeBurnerJson.abi, MemeBurnerJson.contractAddress);
 });
 
@@ -59,7 +62,24 @@ async function approveMeme1() {
 
 async function mintToken() {
 	try {
-		var mint = await contractMeme1.value.methods.mint(10).send({ from: web3.value.eth.Contract.defaultAccount });
+		var mint = await contractMeme1.value.methods
+			.mint("100000000000000000000000")
+			.send({ from: web3.value.eth.Contract.defaultAccount });
+		console.log("mint", mint);
+	} catch (error) {
+		console.log(error);
+	}
+	// var balanceOf = await contract.methods.balanceOf("0x66422602B2f4885c57EE794174f98d9E4DDBBBC6").call();
+	// console.log("balanceOf", balanceOf);
+	// var totalSupply = await contract.methods.totalSupply().call();
+	// console.log("totalSupply", totalSupply);
+}
+
+async function mintToken2() {
+	try {
+		var mint = await contractMeme2.value.methods
+			.mint("100000000000000000000")
+			.send({ from: web3.value.eth.Contract.defaultAccount });
 		console.log("mint", mint);
 	} catch (error) {
 		console.log(error);