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">
+						<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() {
+function isMetaMaskInstalled(connector) {
-	//metamask is not installed but showing true, is that a bug?
+	const metamaskInstalled = connector?.options?.getProvider();
-	if (typeof window.ethereum !== "undefined" && window.ethereum?.isMetaMask && !window.ethereum.isBraveWallet) {
+	if (metamaskInstalled) {
-		console.log("MetaMask is installed!", window.ethereum);
 		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
-						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
+							class="sacrifice-adder-step bloodline-badge"
-						<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
+							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) {
+	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)
+                // @media (min-width: 992px)
-                    font-size: 12px
+                //     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,

src/main.js

@@ -38,7 +38,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
-import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket, faDroplet, faMoon, faPerson } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket, faDroplet, faMoon, faPerson, faWallet } from "@fortawesome/free-solid-svg-icons";
 
 import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
 
@@ -65,9 +65,20 @@ library.add(
 	faChevronUp,
     faDroplet,
     faMoon,
-    faPerson
+    faPerson,
+    faWallet
 );
 
+var logging = localStorage.getItem("LOGGING");
+if (logging === "true") {
+} else {
+	if (!window.console) window.console = {};
+	var methods = ["log", "debug", "warn", "info"];
+	for (let i = 0; i < methods.length; i++) {
+		console[methods[i]] = function () {};
+	}
+}
+
 const app = createApp(App)
 
 
@@ -109,7 +120,10 @@ try {
 				},
 			}),
 			new MetaMaskConnector({ chains }),
-			// new InjectedConnector({ chains }),
+			new InjectedConnector({
+				chains,
+				getProvider: () => (typeof window !== "undefined" ? window.myInjectedWallet : undefined),
+			}),
 			new WalletConnectConnector({
 				chains,
 				options: {

src/stores/cycles.js

@@ -67,13 +67,16 @@ export const useCycleStore = defineStore("cycles", {
             var data = await memeBurnerStore.getSacrificedCycle(this.currentCycle);
             console.log("this.currentCycle", this.currentCycle);
             console.log("this.cycles", this.cycles);
-			var tokenIndex = this.cycles[this.currentCycle]?.token.findIndex(
+            if (this.cycles[this.currentCycle]) {
+                var tokenIndex = this.cycles[this.currentCycle].token.findIndex(
 					(tokenData) => tokenData.contractAddress === sacrificedToken
 				);
 				console.log("tokenIndex", tokenIndex);
 				const token = tokenStore.getToken(sacrificedToken);
 				this.cycles[this.currentCycle].token[tokenIndex].amount =
-                Number(data[tokenIndex].result[1]) / Math.pow(10, token.decimals)
+					Number(data[tokenIndex].result[1]) / Math.pow(10, token.decimals);
+            }
+				
         },
         /**
          * main function to fill a round, will not be filled when already loaded

src/stores/sacrifice.js

@@ -55,7 +55,7 @@ export const useSacrificeStore = defineStore("sacrifice", {
                 // });
                 
                 var rewardData = data.logs.filter((logObject) => {
-					return logObject.topics.filter(
+					return logObject.topics.find(
 						(topic) => topic === "0x5e60ccd3c81486143d815dce24867a494d7fee585a0a44282cf479b19a5186ee"
 					);
 				});

src/stores/tokens.js

@@ -28,6 +28,20 @@ export const useTokenStore = defineStore("token", {
 				backgroundColor: "#4b8501",
 				abi: Meme1Json.abi,
 				contractAddress: Meme1Json.contractAddress,
+				addSteps: [
+					{
+						amount: 10000000,
+						name: "10m",
+					},
+					{
+						amount: 100000000,
+						name: "100m",
+					},
+					{
+						amount: 1000000000,
+						name: "1b",
+					},
+				],
 			},
 			{
 				name: "$SHIB",
@@ -41,6 +55,20 @@ export const useTokenStore = defineStore("token", {
 				},
 				abi: Meme2Json.abi,
 				contractAddress: Meme2Json.contractAddress,
+				addSteps: [
+					{
+						amount: 1000000,
+						name: "1m",
+					},
+					{
+						amount: 10000000,
+						name: "10m",
+					},
+					{
+						amount: 100000000,
+						name: "100m",
+					},
+				],
 			},
 			{
 				name: "$ELON",
@@ -54,6 +82,20 @@ export const useTokenStore = defineStore("token", {
 				},
 				abi: Meme3Json.abi,
 				contractAddress: Meme3Json.contractAddress,
+				addSteps: [
+					{
+						amount: 10000000,
+						name: "10m",
+					},
+					{
+						amount: 100000000,
+						name: "100m",
+					},
+					{
+						amount: 1000000000,
+						name: "1b",
+					},
+				],
 			},
 			// {
 			// 	name: "$BITCOIN",