visual changes + sacrifice error fix

src/components/SacrificeToken.vue

@@ -92,7 +92,7 @@
 							v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
 							@click="approvalData = memeburnerStore.sacrificeMeme(tokenNumber)"
 						>
-							<font-awesome-icon v-if="loading" icon="spinner" spin />
+							<font-awesome-icon v-if="memeburnerStore.loading" icon="spinner" spin />
 							Sacrifce {{ activeToken.name }}
 						</div>
 						<div
@@ -162,18 +162,23 @@ async function getRewardsFor(e) {
 	// const rewardsForResult = await tokenStore.getRewardsFor(10000);
 	console.log("rewardsForResult", rewardsForResult);
 	console.log("tokenStore.memeToken.decimals", tokenStore.memeToken.decimals);
-	console.log("Math.pow(10, tokenStore.memeToken.decimals)", Math.pow(10, tokenStore.memeToken.decimals));
-	output.value = rewardsForResult / Math.pow(10, tokenStore.memeToken.decimals);
+	console.log(
+		"Math.pow(10, tokenStore.memeToken.decimals)",
+		Math.pow(10, tokenStore.memeToken.decimals)
+	);
+	output.value =
+		rewardsForResult / Math.pow(10, tokenStore.memeToken.decimals);
 }
 
 async function addTokens(value) {
 	tokenNumber.value = tokenNumber.value + value;
-	output.value = await memeburnerStore.getRewardsFor(parseInt(tokenNumber.value));
+	output.value = await memeburnerStore.getRewardsFor(
+		parseInt(tokenNumber.value)
+	);
 }
 </script>
 
 <style lang="sass">
-
 .sacrifice-wrapper
     display: flex
     flex-direction: column
@@ -206,14 +211,15 @@ async function addTokens(value) {
                 cursor: pointer
                 background-color: #0F0F0F
                 text-align: center
+                user-select: none
+                border: 4px solid transparent
+                .sacrifice-token-logo
+                    pointer-events: none
                 // @media (min-width: 992px)
                 //     padding: 0
                 //     background-color: unset
                 &.sacrifice-token--active
-                    padding: 10px
                     border-color: var(--purple)
-                    @media (min-width: 992px)
-                        border-color: var(--blood-color)
 
                 .sacrifice-token-name
                     padding: 5px 26px
@@ -272,6 +278,7 @@ async function addTokens(value) {
                 width: 45px
                 height: 45px
                 border-radius: 50%
+                pointer-events: none
                 @media (min-width: 992px)
                     height: 83px
                     width: auto

src/components/TokenClaim.vue

@@ -41,6 +41,11 @@
 			</div>
 			<div v-else class="btn btn-immortal btn--disabled">Nothing to claim</div>
 		</div>
+        <div class="stake-buttons">
+			<div class="btn btn-immortal">Stake</div>
+			<div class="btn btn-immortal">Unstake</div>
+
+        </div>
 	</div>
 </template>
 
@@ -58,7 +63,8 @@ const rewardLockerStore = useRewardLockerStore();
 const walletStore = useWalletStore();
 const roundStore = useRoundsStore();
 const { address } = storeToRefs(walletStore);
-const { activeRound, currentRound, getCurrentRoundData } = storeToRefs(roundStore);
+const { activeRound, currentRound, getCurrentRoundData } =
+	storeToRefs(roundStore);
 
 onMounted(async () => {});
 
@@ -79,7 +85,13 @@ async function claimRewards() {
         padding: 32px 40px
     .claim-button
         text-align: center
-        margin-top: 32px
+        margin: 32px 0
+    .stake-buttons
+        display: flex
+        text-align: center
+        gap: 32px
+        div
+            flex: 1 1 50%
 .rewards-wrapper
     margin-bottom: 16px
 .rewards-divider