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

update tokens + desktop version

Browse Source
This commit is contained in:
EmberSpirit
2023-09-21 19:08:03 +02:00
parent 9330168af2
commit 1b2ea9b2a2
21 changed files with 880 additions and 1172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+6
View File
@@ -21,6 +21,7 @@
"swiper": "^9.4.1", "swiper": "^9.4.1",
"viem": "^1.4.1", "viem": "^1.4.1",
"vue": "^3.3.2", "vue": "^3.3.2",
"vue-collapsed": "^1.2.8",
"vue-router": "^4.2.0" "vue-router": "^4.2.0"
}, },
"devDependencies": { "devDependencies": {
@@ -5769,6 +5770,11 @@
"@vue/shared": "3.3.4" "@vue/shared": "3.3.4"
} }
}, },
"node_modules/vue-collapsed": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/vue-collapsed/-/vue-collapsed-1.2.8.tgz",
"integrity": "sha512-JHZgnoT/NisPQFvcafFxLEsRLibe7rS6yvfqyJ+ZaSbchachaRKwvOWPqDxJEOFVjUF7eVIOa26ZmoSeDcrqcw=="
},
"node_modules/vue-eslint-parser": { "node_modules/vue-eslint-parser": {
"version": "9.3.1", "version": "9.3.1",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz",
package.json
+2 -1
View File
@@ -22,6 +22,7 @@
"swiper": "^9.4.1", "swiper": "^9.4.1",
"viem": "^1.4.1", "viem": "^1.4.1",
"vue": "^3.3.2", "vue": "^3.3.2",
"vue-collapsed": "^1.2.8",
"vue-router": "^4.2.0" "vue-router": "^4.2.0"
}, },
"devDependencies": { "devDependencies": {
@@ -32,4 +33,4 @@
"eslint-plugin-vue": "^9.11.0", "eslint-plugin-vue": "^9.11.0",
"vite": "^4.3.5" "vite": "^4.3.5"
} }
} }
src/App.vue
+17 -3
View File
@@ -159,7 +159,7 @@ onMounted(async () => {
</div> </div>
<div class="footer"> <div class="footer">
<div class="footer-inner"> <div class="footer-inner">
<div class="footer-headline">Follow Bloodline</div> <div class="footer-headline">Join Bloodline</div>
<div class="footer-social-links"> <div class="footer-social-links">
<div class="social-bloodline-badge"> <div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon"> <div class="social-bloodline-badge-icon">
@@ -193,12 +193,20 @@ onMounted(async () => {
</template> </template>
<style lang="sass"> <style lang="sass">
header
margin-bottom: 100px
@media (min-width: 992px)
margin-bottom: 200px
.footer .footer
height: auto height: auto
background-color: var(--midnight-black) background-color: var(--midnight-black)
@media (min-width: 992px) @media (min-width: 992px)
height: 450px height: 150px
min-height: 450px min-height: 150px
display: flex
flex-direction: column
justify-content: center
.footer-inner .footer-inner
padding: 16px 0 24px 0 padding: 16px 0 24px 0
font-size: 24px font-size: 24px
@@ -206,6 +214,8 @@ onMounted(async () => {
flex-direction: column flex-direction: column
gap: 8px gap: 8px
align-items: center align-items: center
@media (min-width: 992px)
justify-content: center
.footer-headline .footer-headline
font-size: 16px font-size: 16px
.footer-social-links .footer-social-links
@@ -219,9 +229,13 @@ onMounted(async () => {
align-items: center align-items: center
flex: 0 1 0 flex: 0 1 0
color: black color: black
&:hover,&:active,&:focus
background-color: lighten( #858585, 10%)
cursor: pointer
.social-bloodline-badge-icon .social-bloodline-badge-icon
font-size: 16px font-size: 16px
.main .main
padding-top: 24px
&.mobile &.mobile
&.no-scroll &.no-scroll
overflow: hidden overflow: hidden
src/assets/sass/buttons.sass
-1
View File
@@ -15,7 +15,6 @@
&.btn-immortal &.btn-immortal
background-color: $purple background-color: $purple
color: $button-color color: $button-color
font-size: 24px
&[disabled], &.btn--disabled &[disabled], &.btn--disabled
background-color: darken($purple, 10%) background-color: darken($purple, 10%)
cursor: not-allowed cursor: not-allowed
src/assets/sass/main.sass
+6 -4
View File
@@ -18,10 +18,6 @@ body
color: $white color: $white
font-family: 'Inter', sans-serif font-family: 'Inter', sans-serif
.main
padding-top: 106px
@media (min-width: 992px)
padding-top: 208px
html html
font-size: var(--font-size-main) font-size: var(--font-size-main)
html, body, #app html, body, #app
@@ -35,12 +31,18 @@ body
flex-direction: column flex-direction: column
.footer .footer
margin-top: auto margin-top: auto
@media (min-width: 992px)
margin-top: 80px
.container .container
margin-right: auto margin-right: auto
margin-left: auto margin-left: auto
padding-right: 16px padding-right: 16px
padding-left: 16px padding-left: 16px
// &.container--variant1
// @media (min-width: 992px)
// max-width: 800px
// padding: 24px 64px
@media (min-width: 992px) @media (min-width: 992px)
max-width: 800px max-width: 800px
src/assets/sass/variables.sass
+28 -1
View File
@@ -16,7 +16,7 @@ $purple: #4B0082
$midnight-black: #0F0F0F $midnight-black: #0F0F0F
$darkgrey: #202020 $darkgrey: #202020
$grey2: #2D2D2D $grey2: #2D2D2D
$dark-grey: #2D2D2D $dark-grey: #202020
$button-color: $white $button-color: $white
$button-background-color: $black $button-background-color: $black
@@ -47,12 +47,16 @@ $button-background-color: $black
font-style: normal font-style: normal
font-weight: 400 font-weight: 400
line-height: normal line-height: normal
@media (min-width: 992px)
font-size: 24px
.mid-mid-text .mid-mid-text
font-family: Inter font-family: Inter
font-size: 18px font-size: 18px
font-style: normal font-style: normal
font-weight: 400 font-weight: 400
line-height: normal line-height: normal
@media (min-width: 992px)
font-size: 24px
.mid-text .mid-text
font-family: Inter font-family: Inter
font-size: 24px font-size: 24px
@@ -72,6 +76,22 @@ $button-background-color: $black
font-weight: 400 font-weight: 400
line-height: normal line-height: normal
letter-spacing: 4.32px letter-spacing: 4.32px
.sub-header
font-family: Inter
font-style: normal
font-weight: 400
line-height: normal
font-size: 24px
@media (min-width: 992px)
font-size: 32px
.header
font-family: Inter
font-size: 32px
font-style: normal
font-weight: 400
line-height: normal
@media (min-width: 992px)
font-size: 40px
// :root // :root
// --font-size-text: 16px // --font-size-text: 16px
@@ -85,3 +105,10 @@ $button-background-color: $black
.transparent .transparent
background-color: transparent background-color: transparent
.card
border-radius: 16px
@media (min-width: 992px)
padding: 48px 32px
&.card--glow
box-shadow: 0px 12px 150px 0px rgba(75, 0, 130, 0.35)
src/components/BloodChart.vue
+62 -3
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="blood-chart-wrapper"> <div class="blood-chart-wrapper" v-if="isMobile">
<div class="blood-arrow left"> <div class="blood-arrow left">
<img <img
class="swiper-arrow" class="swiper-arrow"
@@ -9,6 +9,7 @@
/> />
</div> </div>
<swiper <swiper
v-if="isMobile"
class="blood-chart" class="blood-chart"
:slidesPerView="3" :slidesPerView="3"
:centeredSlides="false" :centeredSlides="false"
@@ -82,10 +83,67 @@
/> />
</div> </div>
</div> </div>
<div class="blood-chart-wrapper" v-else>
<div class="blood-chart">
<div class="blood-chart-element" v-for="coin in token" :key="coin.name">
<div class="blood-chart-element-header">
<div class="blood-chart-coin">
<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
</div>
<div class="blood-chart-coin-title">{{ coin.name }}</div>
</div>
<div class="blood-chart-element-body">
<div class="blood-chart-bar-wrapper">
<svg
class="waves"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none"
shape-rendering="auto"
>
<defs>
<path
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
</g>
</svg>
<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
<div class="wrapper">
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</div>
<div class="blood-chart-bar-percentage">
{{ getPercentage(coin.amount, props.data.goal) }}%
</div>
</div>
</div>
</div>
<div class="blood-chart-element-footer">
<div class="blood-chart-amount">
<!-- {{ compactNumber(coin.amount) }} -->
{{ coin.amount.toFixed(2) }}
</div>
<div class="blood-chart-coin">$BLOOD</div>
</div>
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { computed, ref } from "vue"; import { computed, ref, inject } from "vue";
import { getPercentage, compactNumber } from "@/helper/helper.js"; import { getPercentage, compactNumber } from "@/helper/helper.js";
import { useMemeburnerStore } from "@/stores/memeburner"; import { useMemeburnerStore } from "@/stores/memeburner";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
@@ -101,6 +159,7 @@ const memeBurnerStore = useMemeburnerStore();
const props = defineProps({ const props = defineProps({
data: Object, data: Object,
}); });
const isMobile = inject("isMobile");
console.log(props.data); console.log(props.data);
@@ -148,7 +207,7 @@ const token = computed(() => props.data?.token);
justify-content: space-around justify-content: space-around
display: inline-flex display: inline-flex
@media (min-width: 992px) @media (min-width: 992px)
gap: 96px gap: 32px
width: unset width: unset
justify-content: unset justify-content: unset
src/components/ConnectWallet.vue
+5 -1
View File
@@ -174,11 +174,15 @@ async function connectWallet(connector) {
.connected-tokens-headline .connected-tokens-headline
font-size: 18px font-size: 18px
margin-bottom: 16px
.connected-tokens .connected-tokens
display: flex
flex-direction: column
gap: 16px
margin-bottom: 24px
.connected-token .connected-token
display: flex display: flex
gap: 16px gap: 16px
padding: 16px 8px
align-items: center align-items: center
.connected-token-button .connected-token-button
margin-left: auto margin-left: auto
src/components/Navbar.vue
+107 -45
View File
@@ -1,37 +1,3 @@
<script setup>
import { storeToRefs } from "pinia";
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { getblocky } from "@/helper/helper.js";
const emit = defineEmits(["showPanel"]);
const walletStore = useWalletStoreV2();
const { connected, address } = storeToRefs(walletStore);
const isMobile = inject("isMobile");
const showPanel = inject("showPanel");
const showNavbar = ref(true);
const lastScrollPosition = ref(0);
function onScroll() {
const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
if (currentScrollPosition < 0) {
return;
}
showNavbar.value = currentScrollPosition < lastScrollPosition.value;
lastScrollPosition.value = currentScrollPosition;
}
onMounted(() => {
window.addEventListener("scroll", onScroll);
});
onBeforeUnmount(() => {
window.removeEventListener("scroll");
});
</script>
<template> <template>
<header> <header>
<div class="navbar" :class="{ 'navbar--hidden': !showNavbar }"> <div class="navbar" :class="{ 'navbar--hidden': !showNavbar }">
@@ -45,32 +11,47 @@ onBeforeUnmount(() => {
<router-link to="/">Bloodline</router-link> <router-link to="/">Bloodline</router-link>
</div> </div>
<div class="navbar-center" v-if="!isMobile"> <div class="navbar-center" v-if="!isMobile">
<div class="navbar-social-links"> <!-- <div class="navbar-social-links">
<div class="social-bloodline-badge"> <div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon"> <div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" /> <font-awesome-icon icon="fa-brands fa-discord" />
</div> </div>
<div class="social-bloodline-badge-text">Discord</div> <div class="social-bloodline-badge-text">Discord</div>
</div> </div>
<div class="social-bloodline-badge"> <div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon"> <div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-telegram" /> <font-awesome-icon icon="fa-brands fa-telegram" />
</div> </div>
<div class="social-bloodline-badge-text">Telegram</div> <div class="social-bloodline-badge-text">Telegram</div>
</div> </div>
<div class="social-bloodline-badge"> <div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon"> <div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-twitter" /> <font-awesome-icon icon="fa-brands fa-twitter" />
</div> </div>
<div class="social-bloodline-badge-text">Twitter</div> <div class="social-bloodline-badge-text">Twitter</div>
</div> </div>
</div> </div> -->
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-navigation mid-text" v-if="!isMobile && connected">
<div
class="navbar-navigation-link"
v-for="link in links"
:key="link.name"
:class="{ active: link.name === route.name }"
@click="router.push(link.path)"
>
<div class="icon">
<img :src="link.icon" alt="" />
</div>
<div class="text">{{ link.title }}</div>
</div>
</div>
<div v-if="!isMobile"> <div v-if="!isMobile">
<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> --> <!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
<div v-if="!address" class="btn btn-immortal" @click="showPanel = true">connect</div> <div v-if="!address" class="btn btn-immortal mid-text" @click="showPanel = true">connect</div>
<span v-else @click="showPanel = true"> test</span> <!-- <span v-else @click="showPanel = true"> test</span> -->
<div v-else @click="showPanel = true"><img :src="getblocky(address)" alt="avatar" /></div>
</div> </div>
<div v-else @click="showPanel = true"> <div v-else @click="showPanel = true">
<div class="login-icon" v-if="!address"> <div class="login-icon" v-if="!address">
@@ -84,8 +65,70 @@ onBeforeUnmount(() => {
</header> </header>
</template> </template>
<script setup>
import { storeToRefs } from "pinia";
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { getblocky } from "@/helper/helper.js";
import { useRoute, useRouter } from "vue-router";
const emit = defineEmits(["showPanel"]);
const walletStore = useWalletStoreV2();
const { connected, address } = storeToRefs(walletStore);
const isMobile = inject("isMobile");
const showPanel = inject("showPanel");
const router = useRouter();
const route = useRoute();
const showNavbar = ref(true);
const lastScrollPosition = ref(0);
function onScroll() {
const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
if (currentScrollPosition < 0) {
return;
}
showNavbar.value = currentScrollPosition < lastScrollPosition.value;
lastScrollPosition.value = currentScrollPosition;
}
const links = [
{
title: "Sacrifice",
name: "home",
path: "/",
icon: "/assets/img/sacrifice-icon.png",
},
{
title: "Cycle",
name: "cycle",
path: "/cycle",
icon: "/assets/img/cycle-icon.png",
},
{
title: "Profile",
name: "profile",
path: "/profile",
icon: "/assets/img/profile-icon.png",
},
];
onMounted(() => {
window.addEventListener("scroll", onScroll);
});
onBeforeUnmount(() => {
window.removeEventListener("scroll");
});
</script>
<style lang="sass" scoped> <style lang="sass" scoped>
header header
// margin-bottom: 82px
// @media (min-width: 992px)
// margin-bottom: 128px
.navbar .navbar
position: fixed position: fixed
z-index: 3 z-index: 3
@@ -142,6 +185,25 @@ header
.navbar-end .navbar-end
display: flex display: flex
margin-left: auto margin-left: auto
gap: 80px
.navbar-navigation
display: flex
align-items: center
gap: 48px
.navbar-navigation-link
display: flex
gap: 8px
&.active
border-bottom: 2px solid white
&:active, &:hover, &:focus
cursor: pointer
.icon
img
width: 20px
height: 20px
.login-icon .login-icon
color: var(--white) color: var(--white)
background-color: var(--purple) background-color: var(--purple)
src/components/RewardsWrapper.vue
+2 -8
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="rewards-wrapper"> <div class="rewards-wrapper">
<div class="rewards-headline"> <div class="rewards-headline low-mid-text">
{{ props.title }} {{ props.title }}
</div> </div>
<div class="rewards-inner"> <div class="rewards-inner">
<div class="rewards-body"> <div class="rewards-body">
<div class="rewards-coin">$BLOOD</div> <div class="rewards-coin low-mid-text">$BLOOD</div>
<div class="rewards-amount">{{ props.amount }}</div> <div class="rewards-amount">{{ props.amount }}</div>
</div> </div>
<img class="bloodline-token" :src="props.image" alt="vampir" /> <img class="bloodline-token" :src="props.image" alt="vampir" />
@@ -27,18 +27,12 @@ const props = defineProps({
display: flex display: flex
flex-direction: column flex-direction: column
gap: 8px gap: 8px
.rewards-headline
font-size: 16px
.rewards-inner, .rewards-clan-wrapper .rewards-inner, .rewards-clan-wrapper
display: flex display: flex
padding: 0 8px 8px 8px padding: 0 8px 8px 8px
border-bottom: 1px solid var(--grey, #858585) border-bottom: 1px solid var(--grey, #858585)
.rewards-body .rewards-body
align-self: center align-self: center
.rewards-coin
font-size: 16px
@media (min-width: 992px)
font-size: 24px
.rewards-amount .rewards-amount
text-align: left text-align: left
font-size: 24px font-size: 24px
src/components/SacrificeToken.vue
+18 -14
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="sacrifice-wrapper bloodline-wrapper"> <div class="sacrifice-wrapper card card--glow bloodline-wrapper">
<!-- {{ activeToken.allowance }} --> <!-- {{ activeToken.allowance }} -->
<div class="sacrifice-inner"> <div class="sacrifice-inner">
<div class="sacrifice-headline">Select Sacrifice</div> <div class="sacrifice-headline">Select Sacrifice</div>
@@ -32,7 +32,7 @@
'sacrifice-from-wrapper': true, 'sacrifice-from-wrapper': true,
'bloodline-border': true, 'bloodline-border': true,
'bloodline-border--variant1': true, 'bloodline-border--variant1': true,
purple: isMobile, purple: true,
}" }"
> >
<div class="sarcrifice-from-input"> <div class="sarcrifice-from-input">
@@ -63,7 +63,7 @@
'sacrifice-from-wrapper': true, 'sacrifice-from-wrapper': true,
'bloodline-border': true, 'bloodline-border': true,
'bloodline-border--variant1': true, 'bloodline-border--variant1': true,
purple: isMobile && output && output > 0, purple: output && output > 0,
}" }"
> >
<div class="sarcrifice-from-input"> <div class="sarcrifice-from-input">
@@ -84,12 +84,16 @@
} }
" "
> >
<div class="mid-mid-text">No Staking Bonus</div> <div class="mid-mid-text">+ Staking Bonus</div>
<div class="icon"> <div class="icon">
<font-awesome-icon icon="chevron-down" /> <font-awesome-icon icon="chevron-down" />
</div> </div>
</div> </div>
<stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component> <stake-component-v1 :variant="1" v-if="showStakingMenu">
<template v-slot:headline> {{ null }}</template>
</stake-component-v1>
<!-- <stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component> -->
</div> </div>
</div> </div>
<div class="sacrificed-info" v-if="state === 4"> <div class="sacrificed-info" v-if="state === 4">
@@ -112,7 +116,7 @@
</div> </div>
<div class="sacrifice-buttons-function-wrapper"> <div class="sacrifice-buttons-function-wrapper">
<template v-if="walletStore.connected"> <template v-if="walletStore.connected">
<div class="btn btn-immortal" disabled v-if="state === 0">Enter Amount</div> <div class="btn btn-immortal sub-header" disabled v-if="state === 0">Enter Amount</div>
<div <div
class="btn btn-immortal" class="btn btn-immortal"
v-if=" v-if="
@@ -125,20 +129,19 @@
Sacrifce Sacrifce
</div> </div>
<div <div
class="btn btn-immortal" class="btn btn-immortal sub-header"
v-if=" v-if="
(!activeToken.allowance || activeToken.allowance < tokenNumber) && (!activeToken.allowance || activeToken.allowance < tokenNumber) &&
(state === 1 || state === 4) (state === 1 || state === 4)
" "
@click="approveToken(tokenNumber)" @click="approveToken(tokenNumber)"
> >
Approve Approve Token
</div> </div>
<div class="btn btn-immortal" disabled v-if="state === 2">Sign Transaction</div> <div class="btn btn-immortal" disabled v-if="state === 2">Sign Transaction</div>
<div class="btn btn-immortal" disabled v-if="state === 3">Loading...</div> <div class="btn btn-immortal" disabled v-if="state === 3">Loading...</div>
</template> </template>
<template v-else> <template v-else>
<!-- <div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div> -->
<div class="btn btn-immortal" @click="showPanel = true">Connect</div> <div class="btn btn-immortal" @click="showPanel = true">Connect</div>
</template> </template>
</div> </div>
@@ -152,7 +155,8 @@ import { ref, defineProps, watch, inject, computed } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2"; import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens"; import { useTokenStore } from "@/stores/tokens";
import { useMemeburnerStore } from "@/stores/memeburner"; import { useMemeburnerStore } from "@/stores/memeburner";
import StakeComponent from "./StakeComponent.vue"; import StakeComponentV1 from "@/components/StakeComponentV1.vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { waitForTransaction } from "@wagmi/core"; import { waitForTransaction } from "@wagmi/core";
@@ -285,8 +289,6 @@ async function addTokens(value) {
justify-content: center justify-content: center
flex-wrap: wrap flex-wrap: wrap
gap: 12px gap: 12px
@media (min-width: 992px)
justify-content: space-evenly
.sacrifice-token .sacrifice-token
border-radius: 16px border-radius: 16px
@@ -325,8 +327,8 @@ async function addTokens(value) {
border-radius: 16px border-radius: 16px
padding: 16px padding: 16px
font-size: 16px font-size: 16px
gap: 16px
.sacrifice-fees-img .sacrifice-fees-img
flex: 0 0 15%
img img
height: 46px height: 46px
.sacrifice-fees-body .sacrifice-fees-body
@@ -344,6 +346,8 @@ async function addTokens(value) {
display: flex display: flex
flex-direction: column flex-direction: column
gap: 16px gap: 16px
@media (min-width: 992px)
gap: 32px
.sacrifice-from-wrapper,.sacrifice-to-wrapper .sacrifice-from-wrapper,.sacrifice-to-wrapper
.sarcrifice-from-input .sarcrifice-from-input
display: flex display: flex
@@ -413,7 +417,7 @@ async function addTokens(value) {
.sacrifice-staking-bonus .sacrifice-staking-bonus
display: flex display: flex
flex-direction: column flex-direction: column
padding: 4px 8px padding: 8px 16px
row-gap: 8px row-gap: 8px
border-radius: 10px border-radius: 10px
background: var(--midnight-black, #0F0F0F) background: var(--midnight-black, #0F0F0F)
src/components/SlideoutPanel.vue
+3 -2
View File
@@ -45,7 +45,7 @@ function testClick(e) {
bottom: 0 bottom: 0
overflow: auto overflow: auto
@media (min-width: 992px) @media (min-width: 992px)
margin-right: -300px margin-right: -400px
transition: margin-right 250ms ease 0s transition: margin-right 250ms ease 0s
width: auto width: auto
right: 0 right: 0
@@ -61,7 +61,8 @@ function testClick(e) {
overflow: scroll overflow: scroll
height: calc( 100svh - 82px ) height: calc( 100svh - 82px )
@media (min-width: 992px) @media (min-width: 992px)
width: 300px width: 400px
overflow: unset
.slideout-icon .slideout-icon
cursor: pointer cursor: pointer
&:hover, &:active, &:focus &:hover, &:active, &:focus
src/components/StakeComponent.vue
+1 -1
View File
@@ -77,7 +77,7 @@ function openUnstake() {
display: flex display: flex
flex-direction: column flex-direction: column
gap: 16px gap: 16px
&.variant1 &.connected-stake--variant1
background-color: transparent background-color: transparent
border: none border: none
padding: 16px 6px padding: 16px 6px
src/components/StakeComponentV1.vue
+45 -16
View File
@@ -1,16 +1,31 @@
<template> <template>
<stake-component> <div
<template v-slot:headline> Staked </template> class="connected-stake bloodline-border white card"
<template v-slot:subheadline> Stake for a 25% bonus on your sacrifice. Upper limit is your stake. </template> :class="{ 'card--dense': dense, 'connected-stake--variant1': variant === 1 }"
<template v-slot:body> @click="
<token-name-price (e) => {
:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name" e.preventDefault();
:price="walletStore.memeToken?.staked" e.stopPropagation();
></token-name-price> }
<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo> "
<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price> >
</template> <div class="connected-stake-headline mid-mid-text">
<template v-slot:actions> <slot name="headline">Staked</slot>
</div>
<div class="low-mid-text text-center">
<slot name="subheadline">Stake for a 25% bonus on your sacrifice. Upper limit is your stake.</slot>
</div>
<div class="connected-stake-body">
<slot name="body">
<token-name-price
:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
:price="walletStore.memeToken?.staked"
></token-name-price>
<token-logo img="/assets/img/token/bloodline.png" :alt="'^y '"></token-logo>
<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price>
</slot>
</div>
<slot name="actions">
<div class="connected-stake-buttons" v-if="!stakeMenu"> <div class="connected-stake-buttons" v-if="!stakeMenu">
<div class="btn btn-immortal" disabled v-if="roundStore.currentRound === 1">Stake</div> <div class="btn btn-immortal" disabled v-if="roundStore.currentRound === 1">Stake</div>
<div class="btn btn-immortal" v-else @click="openStake">Stake</div> <div class="btn btn-immortal" v-else @click="openStake">Stake</div>
@@ -64,12 +79,21 @@
No $BLOOD on the market. Staking is activated after the first cycle is finished. No $BLOOD on the market. Staking is activated after the first cycle is finished.
</div> </div>
<div class="low-mid-text text-center">You can claim your stake next cycle.</div> <div class="low-mid-text text-center">You can claim your stake next cycle.</div>
</template> </slot>
</stake-component> <slot></slot>
<!-- <div class="connected-stake-buttons" v-if="!stakeMenu">
<div class="btn btn-immortal" @click="openStake">Stake</div>
<div v-if="walletStore.memeToken?.staked === 0 && !stakeonly" class="btn btn-immortal btn--disabled">
Unstake
</div>
<div v-else-if="!stakeonly" class="btn btn-immortal" @click="openUnstake">Unstake</div>
</div> -->
</div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, useSlots } from "vue";
import StakeComponent from "@/components/StakeComponent.vue"; import StakeComponent from "@/components/StakeComponent.vue";
import StakeMenu from "@/components/StakeMenu.vue"; import StakeMenu from "@/components/StakeMenu.vue";
import TokenNamePrice from "@/components/TokenNamePrice.vue"; import TokenNamePrice from "@/components/TokenNamePrice.vue";
@@ -84,13 +108,18 @@ const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore(); const tokenStore = useTokenStore();
const rewardLockerStore = useRewardLockerStore(); const rewardLockerStore = useRewardLockerStore();
const roundStore = useRoundsStore(); const roundStore = useRoundsStore();
const slots = useSlots();
const props = defineProps({ const props = defineProps({
stakeonly: { stakeonly: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false, default: false,
}, },
variant: {
type: Number,
required: false,
default: null,
},
}); });
const stakeMenu = ref(false); const stakeMenu = ref(false);
src/components/TokenClaim.vue
+10 -13
View File
@@ -1,8 +1,8 @@
<template> <template>
<div class="claim bloodline-border bloodline-border__thin grey"> <div class="claim bloodline-border bloodline-border__thin grey">
<div class="claim-headline">You Cycle Rewards</div> <div class="claim-headline sub-header">You Cycle Rewards</div>
<div class="rewards-wrapper" v-if="!isMobile"> <!-- <div class="rewards-wrapper" v-if="!isMobile">
<rewards-wrapper <rewards-wrapper
title="Sacrafice Reward" title="Sacrafice Reward"
coin="$BLOOD" coin="$BLOOD"
@@ -18,8 +18,8 @@
:amount="getCurrentRoundData?.rewards_clan" :amount="getCurrentRoundData?.rewards_clan"
image="/assets/img/vampir.png" image="/assets/img/vampir.png"
/> />
</div> </div> -->
<div class="rewards-list" v-else> <div class="rewards-list">
<rewards-wrapper <rewards-wrapper
title="Sacrafice Reward" title="Sacrafice Reward"
coin="$BLOOD" coin="$BLOOD"
@@ -41,12 +41,12 @@
/> />
</div> </div>
<div class="rewards-total-wrapper"> <div class="rewards-total-wrapper">
<div class="rewards-total-headline">Total Reward</div> <div class="rewards-total-headline low-mid-text">Total Reward</div>
<div class="rewards-total-inner bloodline-border bloodline-border--variant1"> <div class="rewards-total-inner bloodline-border bloodline-border--variant1">
<div class="rewards-body"> <div class="rewards-body">
<div class="rewards-coin">$BLOOD</div> <div class="rewards-coin low-mid-text">$BLOOD</div>
<div class="rewards-amount" v-if="activeRound === currentRound">0</div> <div class="rewards-amount header" v-if="activeRound === currentRound">0</div>
<div class="rewards-amount" v-else>{{ getCurrentRoundData?.rewards_total }}</div> <div class="rewards-amount header" v-else>{{ getCurrentRoundData?.rewards_total }}</div>
</div> </div>
<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" /> <img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
</div> </div>
@@ -63,7 +63,7 @@
</div> --> </div> -->
<div class="claim-button"> <div class="claim-button">
<template v-if="activeRound === currentRound"> <template v-if="activeRound === currentRound">
<button class="btn btn-immortal" @click="router.push({ name: 'home' })">Sacrifice</button> <button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">Sacrifice</button>
</template> </template>
<template v-else-if="getCurrentRoundData?.rewards_total > 0"> <template v-else-if="getCurrentRoundData?.rewards_total > 0">
<Transition name="smooth"> <Transition name="smooth">
@@ -151,15 +151,13 @@ async function claimRewards() {
display: flex display: flex
padding: 12px padding: 12px
flex-direction: column flex-direction: column
gap: 16px
@media (min-width: 992px) @media (min-width: 992px)
padding: 32px 40px padding: 32px 40px
.claim-headline .claim-headline
font-size: 18px
text-align: left text-align: left
margin-bottom: 16px
.claim-button .claim-button
text-align: center text-align: center
margin: 32px 0
.stake-buttons .stake-buttons
display: flex display: flex
text-align: center text-align: center
@@ -176,7 +174,6 @@ async function claimRewards() {
flex-direction: column flex-direction: column
gap: 8px gap: 8px
.rewards-total-headline .rewards-total-headline
font-size: 16px
text-align: left text-align: left
.rewards-total-inner .rewards-total-inner
display: flex display: flex
src/components/TokenLogo.vue
-3
View File
@@ -18,7 +18,4 @@ const props = defineProps({
height: 45px height: 45px
border-radius: 50% border-radius: 50%
pointer-events: none pointer-events: none
@media (min-width: 992px)
height: 83px
width: auto
</style> </style>
src/stores/tokens.js
+27 -24
View File
@@ -5,6 +5,9 @@ import { useContractStore } from "./contracts";
import { useMemeburnerStore } from "./memeburner"; import { useMemeburnerStore } from "./memeburner";
import Meme1Json from "@/assets/contracts/Meme1.json"; import Meme1Json from "@/assets/contracts/Meme1.json";
import Meme2Json from "@/assets/contracts/Meme2.json"; import Meme2Json from "@/assets/contracts/Meme2.json";
import Meme3Json from "@/assets/contracts/Meme3.json";
import Meme4Json from "@/assets/contracts/Meme4.json";
import Meme5Json from "@/assets/contracts/Meme5.json";
import BloodlineJson from "@/assets/contracts/Bloodline.json"; import BloodlineJson from "@/assets/contracts/Bloodline.json";
import { multicall, getContract, fetchToken, getWalletClient, waitForTransaction } from "@wagmi/core"; import { multicall, getContract, fetchToken, getWalletClient, waitForTransaction } from "@wagmi/core";
@@ -43,31 +46,31 @@ export const useTokenStore = defineStore("token", {
logo: "/assets/img/token/elonvamp.png", logo: "/assets/img/token/elonvamp.png",
name: "$ELON Vamp Token", name: "$ELON Vamp Token",
}, },
abi: Meme2Json.abi, abi: Meme3Json.abi,
contractAddress: Meme2Json.contractAddress, contractAddress: Meme3Json.contractAddress,
},
{
name: "$BITCOIN",
logo: "/assets/img/token/bitcoin.png",
logoMobile: "/assets/img/token/bitcoin.png",
vamp: {
logo: "/assets/img/token/bitcoin.png",
name: "$ELON Vamp Token",
},
abi: Meme2Json.abi,
contractAddress: Meme2Json.contractAddress,
},
{
name: "$BAD",
logo: "/assets/img/token/bad.png",
logoMobile: "/assets/img/token/bad.png",
vamp: {
logo: "/assets/img/token/bad.png",
name: "$ELON Vamp Token",
},
abi: Meme2Json.abi,
contractAddress: Meme2Json.contractAddress,
}, },
// {
// name: "$BITCOIN",
// logo: "/assets/img/token/bitcoin.png",
// logoMobile: "/assets/img/token/bitcoin.png",
// vamp: {
// logo: "/assets/img/token/bitcoin.png",
// name: "$ELON Vamp Token",
// },
// abi: Meme4Json.abi,
// contractAddress: Meme4Json.contractAddress,
// },
// {
// name: "$BAD",
// logo: "/assets/img/token/bad.png",
// logoMobile: "/assets/img/token/bad.png",
// vamp: {
// logo: "/assets/img/token/bad.png",
// name: "$ELON Vamp Token",
// },
// abi: Meme5Json.abi,
// contractAddress: Meme5Json.contractAddress,
// },
{ {
abi: BloodlineJson.abi, abi: BloodlineJson.abi,
contractAddress: BloodlineJson.contractAddress, contractAddress: BloodlineJson.contractAddress,
src/views/CycleView.vue
+45 -32
View File
@@ -1,43 +1,38 @@
<template> <template>
<div class="cycle-page"> <div class="cycle-page">
<div class="cycle-header container"> <div class="cycle-header container container--variant1">
<div class="bloodline-page-headline">Cycle</div> <div class="bloodline-page-headline header">Bloodline Cycle</div>
<div class="bloodline-page-description"> <div class="bloodline-page-description low-mid-text">
Claim and trade your $BDL at each cycle's end. Become the most powerful meme clan each cycle and win Claim and trade your $BLOOD at each cycle's end. Become the most powerful meme clan each cycle to win
extra rewards. extra rewards.
</div> </div>
</div> </div>
<div class="slider-wrapper"> <div class="slider-wrapper" :class="{ sticking: sticking }" ref="target">
<font-awesome-icon <font-awesome-icon
:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }" :class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
@click="prevSlide" @click="prevSlide"
:icon="['fas', 'caret-left']" :icon="['fas', 'caret-left']"
/> />
<div class="slider-text">Cycle {{ roundsStore.activeRound }}</div> <div class="slider-text sub-header">Cycle {{ roundsStore.activeRound }}</div>
<font-awesome-icon <font-awesome-icon
:class="{ 'slider-next': true, disabled: roundsStore.currentRound === roundsStore.activeRound }" :class="{ 'slider-next': true, disabled: roundsStore.currentRound === roundsStore.activeRound }"
@click="nextSlide" @click="nextSlide"
:icon="['fas', 'caret-right']" :icon="['fas', 'caret-right']"
/> />
</div> </div>
<div class="cycle card bloodline-wrapper container"> <div class="cycle card card--glow container container--variant1 bloodline-wrapper">
<div class="bloodline-border" v-if="difference > 0 && roundsStore.currentRound === roundsStore.activeRound"> <div
<table> class="bloodline-border round-finish-info low-mid-text"
<tr> v-if="difference > 0 && roundsStore.currentRound === roundsStore.activeRound"
<td>Sacrifice:</td> >
<td class="divider"></td> <!-- <div class="round-finish-info-element low-mid-text"> -->
<!-- <td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td> --> <div class="round-finish-info-key">Sacrifice Goal:</div>
<td>{{ roundsStore.getCurrentRoundData?.goalInBLD }} $BDL</td> <div class="round-finish-info-value">{{ roundsStore.getCurrentRoundData?.goalInBLD }} $BDL</div>
</tr> <!-- </div> -->
<tr> <!-- <div class="round-finish-info-element low-mid-text"> -->
<td>Time left:</td> <div class="round-finish-info-key">Time left:</div>
<td class="divider"></td> <div class="round-finish-info-value">{{ days }} {{ hours }} {{ minutes }}</div>
<td v-if="roundsStore.currentRound === roundsStore.activeRound"> <!-- </div> -->
{{ days }} {{ hours }} {{ minutes }}
</td>
<td v-else>0</td>
</tr>
</table>
</div> </div>
<template v-if="roundsStore.currentRound !== roundsStore.activeRound"> <template v-if="roundsStore.currentRound !== roundsStore.activeRound">
<div <div
@@ -71,7 +66,7 @@
<token-claim></token-claim> <token-claim></token-claim>
<div class="bloodline-clan"> <div class="bloodline-clan">
<h3>Bloodline Clan</h3> <div class="sub-header">Bloodline Clan</div>
<p> <p>
Win extra rewards for you and your clan. Increase the strength of your bloodline by sacrificing more Win extra rewards for you and your clan. Increase the strength of your bloodline by sacrificing more
memes. memes.
@@ -119,6 +114,9 @@ const minutes = ref(null);
const seconds = ref(null); const seconds = ref(null);
const timer = ref(null); const timer = ref(null);
const difference = ref(null); const difference = ref(null);
const target = ref();
const sticking = ref(false);
const memeBurnerStore = useMemeburnerStore(); const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore(); const rewardLockerStore = useRewardLockerStore();
@@ -130,7 +128,6 @@ onMounted(async () => {
// await rewardLockerStore.init(); // await rewardLockerStore.init();
if (!roundsStore.currentRound) { if (!roundsStore.currentRound) {
console.log("test");
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound()); roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
console.log("roundsStore.currentRound", roundsStore.currentRound); console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound; roundsStore.activeRound = roundsStore.currentRound;
@@ -194,15 +191,12 @@ function timeBetweenDates(expirationTimestamp) {
</script> </script>
<style lang="sass"> <style lang="sass">
.cycle-header .cycle-header
.bloodline-page-headline .bloodline-page-headline
text-align: center text-align: center
font-size: 32px
margin-bottom: 32px margin-bottom: 32px
.bloodline-page-description .bloodline-page-description
text-align: center text-align: center
font-size: 16px
.slider-wrapper .slider-wrapper
display: flex display: flex
@@ -214,8 +208,10 @@ function timeBetweenDates(expirationTimestamp) {
z-index: 3 z-index: 3
background: #2D2D2D background: #2D2D2D
padding: 16px 0 padding: 16px 0
&:stuck
background-color: red
@media (min-width: 992px) @media (min-width: 992px)
position: unset top: 127px
.slider-text .slider-text
margin: 0 24px margin: 0 24px
margin-top: auto margin-top: auto
@@ -223,6 +219,9 @@ function timeBetweenDates(expirationTimestamp) {
.slider-prev, .slider-next .slider-prev, .slider-next
color: var(--purple) color: var(--purple)
font-size: 40px font-size: 40px
@media (min-width: 992px)
font-size: 60px
cursor: pointer cursor: pointer
&:hover,&:active, &:focus &:hover,&:active, &:focus
filter: brightness(0.80) filter: brightness(0.80)
@@ -233,13 +232,16 @@ function timeBetweenDates(expirationTimestamp) {
.bloodline-wrapper .bloodline-wrapper
background: var(--dark-grey, #202020)
padding-top: 24px padding-top: 24px
border-bottom-left-radius: unset
border-bottom-right-radius: unset
gap: 24px gap: 24px
display: flex display: flex
flex-direction: column flex-direction: column
text-align: center text-align: center
border-bottom-left-radius: unset
border-bottom-right-radius: unset
@media (min-width: 992px)
border-radius: 16px
.cycle-winner .cycle-winner
padding: 8px 24px padding: 8px 24px
@@ -271,4 +273,15 @@ function timeBetweenDates(expirationTimestamp) {
display: flex display: flex
flex-direction: column flex-direction: column
gap: 16px gap: 16px
.round-finish-info
gap: 10px
display: grid
grid-template-columns: 1fr 1fr
text-align: right
.round-finish-info-key
text-align: right
.round-finish-info-value
text-align: left
</style> </style>
src/views/HomeView.vue
+61 -53
View File
@@ -1,7 +1,50 @@
<template>
<div class="sacrifice-page" :class="{ container: !isMobile }">
<section id="bloodline-header">
<div class="header-text">
Turn your meme.<br />
Join the bloodline scheme.
</div>
</section>
<section id="sacrifice">
<sacrifice-token :data="tokenStore.sacrificeToken"></sacrifice-token>
</section>
<section id="cycle-section"></section>
<div id="section-header-container">
<div class="tutorial-header sub-header">
<div class="tutorial-headline">Tutorial</div>
<div class="tutorial-more" @click="openTutorialFunc">
<font-awesome-icon v-if="openTutorial" icon="chevron-up" />
<font-awesome-icon v-else icon="chevron-down" />
</div>
</div>
<Collapse :when="openTutorial" class="tutorial-wrapper" ref="tutorialWrapper">
<div class="tutorial-text container mid-mid-text">
When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
</div>
<section id="tokenomics">
<div class="card card--glow">
<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
</div>
</section>
<div class="tutorial-footer">
$BLOOD is 100%<br />
community owned.<br />
No team %, no pre-mine.
</div>
</Collapse>
</div>
</div>
</template>
<script setup> <script setup>
import { ref, computed, inject, onMounted, onBeforeUnmount } from "vue"; import { ref, computed, inject, onMounted, onBeforeUnmount } from "vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import SacrificeToken from "@/components/SacrificeToken.vue"; import SacrificeToken from "@/components/SacrificeToken.vue";
import { Collapse } from "vue-collapsed";
// import { useWalletStore } from "@/stores/wallet"; // import { useWalletStore } from "@/stores/wallet";
import { useTokenStore } from "@/stores/tokens"; import { useTokenStore } from "@/stores/tokens";
@@ -11,64 +54,27 @@ const roundsStore = useRoundsStore();
const { getCurrentRoundData } = storeToRefs(roundsStore); const { getCurrentRoundData } = storeToRefs(roundsStore);
const { currentRound, activeRound, rounds } = storeToRefs(roundsStore); const { currentRound, activeRound, rounds } = storeToRefs(roundsStore);
const tutorialWrapper = ref(null);
const openTutorial = ref(false); const openTutorial = ref(false);
const isMobile = inject("isMobile"); const isMobile = inject("isMobile");
function openTutorialFunc(e) {
openTutorial.value = !openTutorial.value;
setTimeout(function () {
let element = document.getElementById("section-header-container");
console.log("element", element);
element.scrollIntoView({ behavior: "smooth" });
}, 200);
}
</script> </script>
<template>
<main>
<div>
<section id="bloodline-header">
<div class="header-text">
Turn your meme.<br />
Join the bloodline scheme.
</div>
</section>
<section id="sacrifice">
<sacrifice-token :data="tokenStore.sacrificeToken"></sacrifice-token>
</section>
<section id="cycle-section"></section>
<div class="section-header-container">
<div class="tutorial-header">
<div class="tutorial-headline">Tutorial</div>
<div class="tutorial-more" @click="openTutorial = !openTutorial">
<font-awesome-icon v-if="openTutorial" icon="chevron-up" />
<font-awesome-icon v-else icon="chevron-down" />
</div>
</div>
<div v-if="openTutorial" class="tutorial-wrapper">
<div class="tutorial-text container">
When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
</div>
<section id="tokenomics">
<div class="card">
<h2>Tokenomics</h2>
<p>100% clan owned. No team %, no pre-mine</p>
<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
</div>
</section>
<div class="tutorial-footer">
$BLOOD is 100%<br />
community owned.<br />
No team %, no pre-mine.
</div>
</div>
</div>
</div>
</main>
</template>
<style lang="sass"> <style lang="sass">
.header-text .header-text
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
font-size: 32px font-size: 32px
text-align: center text-align: center
margin-top: 64px margin-top: 24px
margin-bottom: 100px margin-bottom: 48px
@media (min-width: 992px) @media (min-width: 992px)
font-size: 64px font-size: 64px
margin-top: 0px margin-top: 0px
@@ -100,8 +106,8 @@ const isMobile = inject("isMobile");
th th
padding-right: 16px padding-right: 16px
#tokenomics #tokenomics
background-color: var(--darkgrey)
>div >div
background-color: var(--darkgrey)
text-align: center text-align: center
img img
display: block display: block
@@ -129,20 +135,19 @@ const isMobile = inject("isMobile");
.section-header-container #section-header-container
margin: 24px 0 margin: 24px 0
scroll-margin: 150px
.tutorial-header .tutorial-header
display: flex display: flex
justify-content: center justify-content: center
gap: 16px gap: 16px
font-size: 24px
margin-bottom: 24px margin-bottom: 24px
.tutorial-wrapper .tutorial-wrapper
display: flex display: flex
flex-direction: column flex-direction: column
gap: 24px gap: 24px
.tutorial-text .tutorial-text
font-size: 18px
text-align: center text-align: center
.tutorial-footer .tutorial-footer
text-align: center text-align: center
@@ -166,4 +171,7 @@ const isMobile = inject("isMobile");
h2 h2
font-size: 40px font-size: 40px
.content
background: grey
</style> </style>
src/views/ProfileView.vue
+2 -28
View File
@@ -1,34 +1,12 @@
<template> <template>
<div class="profile-page container"> <div class="profile-page container">
<div class="profile-header"> <div class="profile-header">
<div class="profile-headline">Profile</div> <div class="profile-headline header">Profile</div>
<div class="profile-subheader"> <div class="profile-subheader">
<div class="profile-subheader-logo"><img :src="getblocky(walletStore.address)" alt="" /></div> <div class="profile-subheader-logo"><img :src="getblocky(walletStore.address)" alt="" /></div>
<div class="profile-subheader-address">{{ getAddressShortName(walletStore.address) }}</div> <div class="mid-mid-text">{{ getAddressShortName(walletStore.address) }}</div>
</div> </div>
</div> </div>
<!-- <div class="total-rewards-wrapper">
<div class="total-rewards-headline mid-text text-center">Total Rewards</div>
<div class="total-rewards-inner">
<div class="claim-header">Unclaimed</div>
<div class="claim-wrapper">
<div class="claim-inner">
<div class="claim-body">
<div class="claim-coin small-text">$Blood</div>
<div class="claim-amount number-mobile">
{{ walletStore.memeToken?.unclaimedRewards }}
</div>
</div>
<img class="bloodline-token" src="/assets/img/vampir.png" alt="vampir" />
</div>
</div>
<div class="total-rewards-buttons">
<div class="btn btn-immortal" @click="rewardLockerStore.claimAll">Claim</div>
<div class="btn btn-immortal">Stake</div>
</div>
<div class="text-center low-mid-text">You can claim, once the cycle is over.</div>
</div>
</div> -->
<div class="total-rewards-wrapper"> <div class="total-rewards-wrapper">
<div class="total-rewards-headline mid-text text-center">Total Rewards</div> <div class="total-rewards-headline mid-text text-center">Total Rewards</div>
<claim-component></claim-component> <claim-component></claim-component>
@@ -214,7 +192,6 @@ onMounted(async () => {
console.log("loadRounds"); console.log("loadRounds");
if (!roundsStore.currentRound) { if (!roundsStore.currentRound) {
console.log("test");
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound()); roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
console.log("roundsStore.currentRound", roundsStore.currentRound); console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound; roundsStore.activeRound = roundsStore.currentRound;
@@ -250,7 +227,6 @@ const rounds = computed(() => {
.profile-headline .profile-headline
color: #FFF color: #FFF
text-align: center text-align: center
font-size: 32px
.profile-subheader .profile-subheader
display: flex display: flex
justify-content: center justify-content: center
@@ -261,8 +237,6 @@ const rounds = computed(() => {
width: 21px width: 21px
height: 21px height: 21px
border-radius: 20% border-radius: 20%
.profile-subheader-address
font-size: 12px
.total-rewards-wrapper .total-rewards-wrapper
border-radius: 16px border-radius: 16px
background: var(--darkgrey, #202020) background: var(--darkgrey, #202020)
yarn.lock
+433 -919
View File
File diff suppressed because it is too large Load Diff