cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new contracts + visual improvements + cyle end

Browse Source
This commit is contained in:
EmberSpirit
2023-07-20 20:28:21 +02:00
parent cb85a47a94
commit 994c440e2f
13 changed files with 398 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SacrificeToken.vue
+33 -13
View File
@@ -8,7 +8,13 @@
<div class="sacrifice-tokens">
<div
class="sacrifice-token"
:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
:class="[
{
'sacrifice-token--active': token.contractAddress === activeToken.contractAddress,
'bloodline-border': token.contractAddress === activeToken.contractAddress,
'bloodline-border--variant1': token.contractAddress === activeToken.contractAddress,
},
]"
v-for="token in props.data"
:key="token.contractAddress"
@click="tokenStore.changeActiveToken(token)"
@@ -22,7 +28,14 @@
</div>
</div>
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1">
<div
:class="{
'sacrifice-from-wrapper': true,
'bloodline-border': true,
'bloodline-border--variant1': true,
purple: isMobile,
}"
>
<div class="sarcrifice-from-input">
<input @input="processChange" v-model="tokenNumber" :placeholder="0" />
<div class="sacrifice-logo">
@@ -42,7 +55,14 @@
<div class="sacrifice-divider bloodline-devider">
<font-awesome-icon :icon="['fas', 'arrow-down']" />
</div>
<div class="sacrifice-to-wrapper bloodline-border bloodline-border--variant1">
<div
:class="{
'sacrifice-from-wrapper': true,
'bloodline-border': true,
'bloodline-border--variant1': true,
purple: isMobile && output && output > 0,
}"
>
<div class="sarcrifice-from-input">
<div class="sacrifice-to-output">
<div class="sacrifice-to-output-coin">$BLOOD</div>
@@ -94,7 +114,7 @@
</template>
<script setup>
import { ref, defineProps, watch, inject } from "vue";
import { ref, defineProps, watch, inject, computed } from "vue";
import { useWalletStore } from "@/stores/wallet";
import { useTokenStore } from "@/stores/tokens";
import { useMemeburnerStore } from "@/stores/memeBurner";
@@ -129,7 +149,7 @@ const approvalData = ref(null);
const processChange = Helper.debounce((e) => getRewardsFor(e));
async function getRewardsFor(e) {
if (!e.target.value) {
if (!e.target.value || isNaN(e.target.value)) {
output.value = 0;
return;
}
@@ -186,15 +206,15 @@ async function addTokens(value) {
cursor: pointer
background-color: #0F0F0F
text-align: center
@media (min-width: 992px)
padding: 0
background-color: unset
&:hover,
&:active,
&:focus
background-color: var(--tertiary-dark)
// @media (min-width: 992px)
// padding: 0
// background-color: unset
&.sacrifice-token--active
background-color: var(--tertiary-dark)
padding: 10px
border-color: var(--purple)
@media (min-width: 992px)
border-color: var(--blood-color)
.sacrifice-token-name
padding: 5px 26px
font-size: 16px