new contracts + visual improvements + cyle end

src/components/SacrificeToken.vue

@@ -8,7 +8,13 @@
 				<div class="sacrifice-tokens">
 					<div
 						class="sacrifice-token"
-						:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
+						:class="[
+							{
+								'sacrifice-token--active': token.contractAddress === activeToken.contractAddress,
+								'bloodline-border': token.contractAddress === activeToken.contractAddress,
+								'bloodline-border--variant1': token.contractAddress === activeToken.contractAddress,
+							},
+						]"
 						v-for="token in props.data"
 						:key="token.contractAddress"
 						@click="tokenStore.changeActiveToken(token)"
@@ -22,7 +28,14 @@
 				</div>
 			</div>
 			<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
-				<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1">
+				<div
+					:class="{
+						'sacrifice-from-wrapper': true,
+						'bloodline-border': true,
+						'bloodline-border--variant1': true,
+						purple: isMobile,
+					}"
+				>
 					<div class="sarcrifice-from-input">
 						<input @input="processChange" v-model="tokenNumber" :placeholder="0" />
 						<div class="sacrifice-logo">
@@ -42,7 +55,14 @@
 				<div class="sacrifice-divider bloodline-devider">
 					<font-awesome-icon :icon="['fas', 'arrow-down']" />
 				</div>
-				<div class="sacrifice-to-wrapper bloodline-border bloodline-border--variant1">
+				<div
+					:class="{
+						'sacrifice-from-wrapper': true,
+						'bloodline-border': true,
+						'bloodline-border--variant1': true,
+						purple: isMobile && output && output > 0,
+					}"
+				>
 					<div class="sarcrifice-from-input">
 						<div class="sacrifice-to-output">
 							<div class="sacrifice-to-output-coin">$BLOOD</div>
@@ -94,7 +114,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, watch, inject } from "vue";
+import { ref, defineProps, watch, inject, computed } from "vue";
 import { useWalletStore } from "@/stores/wallet";
 import { useTokenStore } from "@/stores/tokens";
 import { useMemeburnerStore } from "@/stores/memeBurner";
@@ -129,7 +149,7 @@ const approvalData = ref(null);
 const processChange = Helper.debounce((e) => getRewardsFor(e));
 
 async function getRewardsFor(e) {
-	if (!e.target.value) {
+	if (!e.target.value || isNaN(e.target.value)) {
 		output.value = 0;
 		return;
 	}
@@ -186,15 +206,15 @@ async function addTokens(value) {
                 cursor: pointer
                 background-color: #0F0F0F
                 text-align: center
-                @media (min-width: 992px)
-                    padding: 0
-                    background-color: unset
-                &:hover,
-                &:active,
-                &:focus
-                    background-color: var(--tertiary-dark)
+                // @media (min-width: 992px)
+                //     padding: 0
+                //     background-color: unset
                 &.sacrifice-token--active
-                    background-color: var(--tertiary-dark)
+                    padding: 10px
+                    border-color: var(--purple)
+                    @media (min-width: 992px)
+                        border-color: var(--blood-color)
+
                 .sacrifice-token-name
                     padding: 5px 26px
                     font-size: 16px

src/components/TokenClaim.vue

@@ -35,7 +35,11 @@
 			<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 v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div>
+			<div v-else-if="getCurrentRoundData?.rewards_total > 0" class="btn btn-immortal" @click="claimRewards">
+				Claim
+			</div>
+			<div v-else class="btn btn-immortal btn--disabled">Nothing to claim</div>
 		</div>
 	</div>
 </template>
@@ -54,7 +58,7 @@ const rewardLockerStore = useRewardLockerStore();
 const walletStore = useWalletStore();
 const roundStore = useRoundsStore();
 const { address } = storeToRefs(walletStore);
-const { activeRound, getCurrentRoundData } = storeToRefs(roundStore);
+const { activeRound, currentRound, getCurrentRoundData } = storeToRefs(roundStore);
 
 onMounted(async () => {});