stepper badge update + injected wallet + smaller fixes

src/components/BloodChart.vue

@@ -213,10 +213,6 @@ function getPercentageBloodChart(amount, goal) {
 .swiper-slide
     width: 80px
 
-.swiper-test
-    display: flex
-    flex-direction: column
-
 
 .blood-arrow
     min-width: 30px

src/components/ConnectWallet.vue

@@ -5,15 +5,24 @@
 			<div class="connectors-wrapper">
 				<div
 					class="connectors-element card"
+					:class="[[connector.id]]"
 					v-for="connector in walletStore.config?.connectors"
 					@click="connectWallet(connector)"
 				>
 					<div class="connector-icon">
-						<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
+						<template v-if="connector.id === 'injected'">
+							<font-awesome-icon :icon="['fas', 'wallet']" />
+						</template>
+						<template v-else>
+							<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
+						</template>
 					</div>
 					<div class="connector-name">
 						<template
-							v-if="connector.id !== 'metaMask' || (connector.id === 'metaMask' && isMetaMaskInstalled())"
+							v-if="
+								connector.id !== 'metaMask' ||
+								(connector.id === 'metaMask' && isMetaMaskInstalled(connector))
+							"
 						>
 							{{ connector.name }}
 						</template>
@@ -95,10 +104,9 @@ async function disconnectWallet() {
 	}
 }
 
-function isMetaMaskInstalled() {
-	//metamask is not installed but showing true, is that a bug?
-	if (typeof window.ethereum !== "undefined" && window.ethereum?.isMetaMask && !window.ethereum.isBraveWallet) {
-		console.log("MetaMask is installed!", window.ethereum);
+function isMetaMaskInstalled(connector) {
+	const metamaskInstalled = connector?.options?.getProvider();
+	if (metamaskInstalled) {
 		return true;
 	}
 	return false;
@@ -124,7 +132,7 @@ function badgeClick(token) {
 
 //special case for metaMask, but I think that is the most used wallet
 async function connectWallet(connector) {
-	if (connector.id === "metaMask" && !isMetaMaskInstalled()) {
+	if (connector.id === "metaMask" && !isMetaMaskInstalled(connector)) {
 		window.open(" https://metamask.io/", "_blank");
 		return;
 	}
@@ -151,6 +159,14 @@ async function connectWallet(connector) {
             &:hover, &:active, &:focus
                 background-color: lighten(#858585, 20%)
                 cursor: pointer
+            &.injected
+                .connector-icon
+                    background-color: white
+                    display: flex
+                    justify-content: center
+                    align-items: center
+                    svg
+                        font-size: 25px
             .connector-icon
                 border-radius: 12px
                 width: 40px

src/components/RewardsWrapper.vue

@@ -17,7 +17,7 @@ import TokenLogo from "@/components/TokenLogo.vue";
 const props = defineProps({
 	title: String,
 	info: String,
-	amount: String,
+	amount: [String, Number],
 	image: String,
 });
 </script>

src/components/SacrificeToken.vue

@@ -45,9 +45,17 @@
 					:logo="activeToken.logo"
 				>
 					<template v-slot:message>
-						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
-						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
-						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
+						<div
+							class="sacrifice-adder-step bloodline-badge"
+							v-for="steps in activeToken.addSteps"
+							:key="steps.name"
+							@click="addTokens(steps.amount)"
+						>
+							<template v-if="sacrificeStore.sacrificeNumber < activeWalletToken.balanceOf">
+								+{{ steps.name }}
+							</template>
+							<template v-else> -{{ steps.name }} </template>
+						</div>
 					</template>
 					<template v-slot:message-end v-if="activeWalletToken?.balanceOf">
 						<div class="input-balance tiny-text">
@@ -192,6 +200,7 @@ const output = ref(0);
 const stakingOutput = ref(null);
 const blockEvent = ref(null);
 const approveToast = ref(null);
+const addOperator = ref(true);
 /**
  * state 0 enter amount
  * state 1 rdy to go
@@ -277,15 +286,25 @@ async function approveToken(amount) {
 }
 
 async function addTokens(value) {
-	sacrificeStore.sacrificeNumber = Number(sacrificeStore.sacrificeNumber) + Number(value);
+	if (sacrificeStore.sacrificeNumber < activeWalletToken.value.balanceOf) {
+		sacrificeStore.sacrificeNumber = Number(sacrificeStore.sacrificeNumber) + Number(value);
+	} else {
+		sacrificeStore.sacrificeNumber = Number(sacrificeStore.sacrificeNumber) - Number(value);
+		if (sacrificeStore.sacrificeNumber < 0) {
+			sacrificeStore.sacrificeNumber = 0;
+		}
+	}
+
 	const rewardValue = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value);
 	output.value = rewardValue.output;
 	stakingOutput.value = rewardValue.staking;
 }
 
 async function addMaxTokens() {
+	addOperator.value = !addOperator.value;
 	sacrificeStore.sacrificeNumber = activeWalletToken.value.balanceOf;
 	const rewardValue = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, activeToken.value);
+	console.log("rewardValue", rewardValue);
 	output.value = rewardValue.output;
 	stakingOutput.value = rewardValue.staking;
 }
@@ -454,7 +473,8 @@ async function changeActiveToken(token) {
             display: flex
             gap: 6px
             .sacrifice-adder-step
-                font-size: 14px
+                font-size: 12px
+                align-items: center
                 background: var(--grey, #858585)
                 color: var(--midnight-black, #0F0F0F)
                 &:hover,
@@ -462,8 +482,8 @@ async function changeActiveToken(token) {
                 &:focus
                     background-color: var(--grey-light)
                     cursor: pointer
-                @media (min-width: 992px)
-                    font-size: 12px
+                // @media (min-width: 992px)
+                //     font-size: 12px
             // .sacrifice-adder-balance
             //     margin-left: auto
             // .sacrifice-adder-max

src/components/StakeComponentV1.vue

@@ -172,6 +172,11 @@ const props = defineProps({
 		required: false,
 		default: null,
 	},
+	dense: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
 });
 
 const stakeMenu = ref(false);

src/components/TokenLogo.vue

@@ -7,7 +7,7 @@
 <script setup>
 const props = defineProps({
 	img: String,
-	alt: Number,
+	alt: String,
 	size: {
 		type: Number,
 		default: 45,