stepper badge update + injected wallet + smaller fixes

This commit is contained in:
EmberSpirit
2023-10-16 12:07:07 +02:00
parent 301c569edc
commit 35f2f0782f
10 changed files with 133 additions and 37 deletions
-4
View File
@@ -213,10 +213,6 @@ function getPercentageBloodChart(amount, goal) {
.swiper-slide
width: 80px
.swiper-test
display: flex
flex-direction: column
.blood-arrow
min-width: 30px
+22 -6
View File
@@ -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() {
//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
+1 -1
View File
@@ -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>
+26 -6
View File
@@ -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) {
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
+5
View File
@@ -172,6 +172,11 @@ const props = defineProps({
required: false,
default: null,
},
dense: {
type: Boolean,
required: false,
default: false,
},
});
const stakeMenu = ref(false);
+1 -1
View File
@@ -7,7 +7,7 @@
<script setup>
const props = defineProps({
img: String,
alt: Number,
alt: String,
size: {
type: Number,
default: 45,
+17 -3
View File
@@ -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: {
+5 -2
View File
@@ -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
+1 -1
View File
@@ -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"
);
});
+42
View File
@@ -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",