From 24d91353b92f89bff074f001757f2d8a0ebec628 Mon Sep 17 00:00:00 2001
From: Michel Fromme <Michel.fromme94@gmail.com>
Date: Mon, 24 Jul 2023 13:25:12 +0200
Subject: [PATCH] visual changes + sacrifice error fix

---
 src/assets/sass/base.sass         |  2 --
 src/assets/sass/buttons.sass      |  5 +----
 src/components/SacrificeToken.vue | 23 +++++++++++++++--------
 src/components/TokenClaim.vue     | 16 ++++++++++++++--
 src/stores/memeburner.js          |  5 +++--
 src/stores/tokens.js              |  2 +-
 src/stores/wallet.js              |  6 ++++++
 src/views/HomeView.vue            | 13 +++++++++----
 8 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/assets/sass/base.sass b/src/assets/sass/base.sass
index eb52556..d4f1bb9 100644
--- a/src/assets/sass/base.sass
+++ b/src/assets/sass/base.sass
@@ -11,8 +11,6 @@
     border: 2px solid #000
     &.bloodline-border--variant1
         border: 4px solid var(--midnight-black)
-        @media (min-width: 992px)
-            border: 4px solid #000
     @media (min-width: 992px)
         padding: 24px 32px
         border: 4px solid #000
diff --git a/src/assets/sass/buttons.sass b/src/assets/sass/buttons.sass
index 5ef639e..a61741c 100644
--- a/src/assets/sass/buttons.sass
+++ b/src/assets/sass/buttons.sass
@@ -8,11 +8,8 @@
         padding: 16px 24px
         gap: 8px
         border-radius: 14px
-        @media (min-width: 992px)
-            background-color: $red
         &:hover,&:focus,&:active
-            background-color: lighten($button-background-color, 10%),
-            color: darken($button-color, 10%),
+            background-color: darken($purple, 10%),
             cursor: pointer
         &.btn--disabled
             background-color: #151515
diff --git a/src/components/SacrificeToken.vue b/src/components/SacrificeToken.vue
index 97c3725..199ba48 100644
--- a/src/components/SacrificeToken.vue
+++ b/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
diff --git a/src/components/TokenClaim.vue b/src/components/TokenClaim.vue
index 86b5677..28e0750 100644
--- a/src/components/TokenClaim.vue
+++ b/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
diff --git a/src/stores/memeburner.js b/src/stores/memeburner.js
index 22b3318..06553fb 100644
--- a/src/stores/memeburner.js
+++ b/src/stores/memeburner.js
@@ -8,7 +8,8 @@ import { useRoundsStore } from "@/stores/rounds";
 export const useMemeburnerStore = defineStore("memeburner", {
 	state: () => ({
 		config: MemeBurnerJson,
-		contract: null,
+        contract: null,
+        loading: false,
         
 	}),
 	getters: {},
@@ -90,7 +91,7 @@ export const useMemeburnerStore = defineStore("memeburner", {
 					.sacrificeMeme(tokenStore.activeToken.contractAddress, amountDecimal)
 					.send({ from: walletStore.address });
 				console.log("reward", reward);
-				tokenStore.activeToken.allowance = await this.allowance();
+				tokenStore.activeToken.allowance = await tokenStore.allowance();
 			} catch (error) {
 				console.error(error);
 			} finally {
diff --git a/src/stores/tokens.js b/src/stores/tokens.js
index 7f5be7c..e1dd6c3 100644
--- a/src/stores/tokens.js
+++ b/src/stores/tokens.js
@@ -112,7 +112,7 @@ export const useTokenStore = defineStore("token", {
 				const memeBurnerStore = useMemeburnerStore();
 				var approve = await this.contract.methods
 					.approve(memeBurnerStore.config.contractAddress, amount)
-					.send({ from: walletStore.address });
+					.send({ from: walletStore.address});
 				//todo parameter value übergeben in eth web3.utils.toHex(web3.utils.toWei(amount, 'ether'))
 
 				// .send({ from: walletStore.address, value: 0.5 });
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 2e9a811..070361c 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -77,6 +77,12 @@ export const useWalletStore = defineStore("wallet", {
         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;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index fe88d47..77723f1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -49,7 +49,9 @@ onBeforeUnmount(() => {
 });
 
 function timeBetweenDates() {
-	const dateEntered = new Date(getCurrentRoundData.value?.expirationTimestamp * 1000);
+	const dateEntered = new Date(
+		getCurrentRoundData.value?.expirationTimestamp * 1000
+	);
 
 	if (dateEntered) {
 		var now = new Date();
@@ -206,7 +208,6 @@ function timeBetweenDates() {
         line-height: 80px
         font-weight: 600
 
-
 .chart-wrapper-coin
     display: flex
     justify-content: space-evenly
@@ -231,12 +232,15 @@ function timeBetweenDates() {
         padding-right: 16px
 #tokenomics
     background-color: var(--darkgrey)
+    padding-bottom: 32px
     >div
         text-align: center
         img
             display: block
             margin-left: auto
             margin-right: auto
+            pointer-events: none
+            user-select: none
 .chart-wrapper
     width: 600px
     height: 600px
@@ -255,7 +259,6 @@ function timeBetweenDates() {
             text-align: center
             padding-top: 10px
 
-
 .slider-wrapper
     display: flex
     justify-content: center
@@ -266,9 +269,11 @@ function timeBetweenDates() {
         margin-top: auto
         margin-bottom: auto
     .slider-prev, .slider-next
-        color: #3B0067
+        color: var(--purple)
         font-size: 40px
         cursor: pointer
+        &:hover,&:active, &:focus
+            filter: brightness(0.80)
         &.disabled
             opacity: .35
             pointer-events: none