rounds implemented + over all improvements

src/components/BloodChart.vue

@@ -1,15 +1,15 @@
 <template>
-	<div class="blood-chart-wrapper">
-		<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
+	<div class="blood-chart-wrapper" v-if="props.data">
+		<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 = [
-	{
-		name: "$PEPE",
-		percentage: 62.2,
-		icon: "/src/assets/img/token/pepevamp.png",
-	},
-	{
-		name: "$SHIB",
-		percentage: 31.2,
-		icon: "/src/assets/img/token/shibvamp.png",
-	},
-	{
-		name: "$ELON",
-		percentage: 54.5,
-		icon: "/src/assets/img/token/elonvamp.png",
-	},
-];
+// const dataPoints = [
+// 	{
+// 		name: "$PEPE",
+// 		percentage: 62.2,
+// 		icon: "/src/assets/img/token/pepevamp.png",
+// 	},
+// 	{
+// 		name: "$SHIB",
+// 		percentage: 31.2,
+// 		icon: "/src/assets/img/token/shibvamp.png",
+// 	},
+// 	{
+// 		name: "$ELON",
+// 		percentage: 54.5,
+// 		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) {
-	console.log("hier", e);
-	output.value = await tokenStore.getRewardsFor(parseInt(e.target.value));
+async function getRewardsFor(e) {
+	if (!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">