update tokens + desktop version
This commit is contained in:
EmberSpirit
+17
-3
@@ -159,7 +159,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div class="footer">
|
||||
<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="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
@@ -193,12 +193,20 @@ onMounted(async () => {
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
header
|
||||
margin-bottom: 100px
|
||||
@media (min-width: 992px)
|
||||
margin-bottom: 200px
|
||||
|
||||
.footer
|
||||
height: auto
|
||||
background-color: var(--midnight-black)
|
||||
@media (min-width: 992px)
|
||||
height: 450px
|
||||
min-height: 450px
|
||||
height: 150px
|
||||
min-height: 150px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
.footer-inner
|
||||
padding: 16px 0 24px 0
|
||||
font-size: 24px
|
||||
@@ -206,6 +214,8 @@ onMounted(async () => {
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
align-items: center
|
||||
@media (min-width: 992px)
|
||||
justify-content: center
|
||||
.footer-headline
|
||||
font-size: 16px
|
||||
.footer-social-links
|
||||
@@ -219,9 +229,13 @@ onMounted(async () => {
|
||||
align-items: center
|
||||
flex: 0 1 0
|
||||
color: black
|
||||
&:hover,&:active,&:focus
|
||||
background-color: lighten( #858585, 10%)
|
||||
cursor: pointer
|
||||
.social-bloodline-badge-icon
|
||||
font-size: 16px
|
||||
.main
|
||||
padding-top: 24px
|
||||
&.mobile
|
||||
&.no-scroll
|
||||
overflow: hidden
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
&.btn-immortal
|
||||
background-color: $purple
|
||||
color: $button-color
|
||||
font-size: 24px
|
||||
&[disabled], &.btn--disabled
|
||||
background-color: darken($purple, 10%)
|
||||
cursor: not-allowed
|
||||
|
||||
@@ -18,10 +18,6 @@ body
|
||||
color: $white
|
||||
font-family: 'Inter', sans-serif
|
||||
|
||||
.main
|
||||
padding-top: 106px
|
||||
@media (min-width: 992px)
|
||||
padding-top: 208px
|
||||
html
|
||||
font-size: var(--font-size-main)
|
||||
html, body, #app
|
||||
@@ -35,12 +31,18 @@ body
|
||||
flex-direction: column
|
||||
.footer
|
||||
margin-top: auto
|
||||
@media (min-width: 992px)
|
||||
margin-top: 80px
|
||||
|
||||
.container
|
||||
margin-right: auto
|
||||
margin-left: auto
|
||||
padding-right: 16px
|
||||
padding-left: 16px
|
||||
// &.container--variant1
|
||||
// @media (min-width: 992px)
|
||||
// max-width: 800px
|
||||
// padding: 24px 64px
|
||||
@media (min-width: 992px)
|
||||
max-width: 800px
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ $purple: #4B0082
|
||||
$midnight-black: #0F0F0F
|
||||
$darkgrey: #202020
|
||||
$grey2: #2D2D2D
|
||||
$dark-grey: #2D2D2D
|
||||
$dark-grey: #202020
|
||||
|
||||
$button-color: $white
|
||||
$button-background-color: $black
|
||||
@@ -47,12 +47,16 @@ $button-background-color: $black
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
line-height: normal
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.mid-mid-text
|
||||
font-family: Inter
|
||||
font-size: 18px
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
line-height: normal
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.mid-text
|
||||
font-family: Inter
|
||||
font-size: 24px
|
||||
@@ -72,6 +76,22 @@ $button-background-color: $black
|
||||
font-weight: 400
|
||||
line-height: normal
|
||||
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
|
||||
// --font-size-text: 16px
|
||||
@@ -85,3 +105,10 @@ $button-background-color: $black
|
||||
|
||||
.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)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="blood-chart-wrapper">
|
||||
<div class="blood-chart-wrapper" v-if="isMobile">
|
||||
<div class="blood-arrow left">
|
||||
<img
|
||||
class="swiper-arrow"
|
||||
@@ -9,6 +9,7 @@
|
||||
/>
|
||||
</div>
|
||||
<swiper
|
||||
v-if="isMobile"
|
||||
class="blood-chart"
|
||||
:slidesPerView="3"
|
||||
:centeredSlides="false"
|
||||
@@ -82,10 +83,67 @@
|
||||
/>
|
||||
</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>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { computed, ref, inject } from "vue";
|
||||
import { getPercentage, compactNumber } from "@/helper/helper.js";
|
||||
import { useMemeburnerStore } from "@/stores/memeburner";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
@@ -101,6 +159,7 @@ const memeBurnerStore = useMemeburnerStore();
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
});
|
||||
const isMobile = inject("isMobile");
|
||||
|
||||
console.log(props.data);
|
||||
|
||||
@@ -148,7 +207,7 @@ const token = computed(() => props.data?.token);
|
||||
justify-content: space-around
|
||||
display: inline-flex
|
||||
@media (min-width: 992px)
|
||||
gap: 96px
|
||||
gap: 32px
|
||||
width: unset
|
||||
justify-content: unset
|
||||
|
||||
|
||||
@@ -174,11 +174,15 @@ async function connectWallet(connector) {
|
||||
|
||||
.connected-tokens-headline
|
||||
font-size: 18px
|
||||
margin-bottom: 16px
|
||||
.connected-tokens
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 16px
|
||||
margin-bottom: 24px
|
||||
.connected-token
|
||||
display: flex
|
||||
gap: 16px
|
||||
padding: 16px 8px
|
||||
align-items: center
|
||||
.connected-token-button
|
||||
margin-left: auto
|
||||
|
||||
+107
-45
@@ -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>
|
||||
<header>
|
||||
<div class="navbar" :class="{ 'navbar--hidden': !showNavbar }">
|
||||
@@ -45,32 +11,47 @@ onBeforeUnmount(() => {
|
||||
<router-link to="/">Bloodline</router-link>
|
||||
</div>
|
||||
<div class="navbar-center" v-if="!isMobile">
|
||||
<div class="navbar-social-links">
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-discord" />
|
||||
<!-- <div class="navbar-social-links">
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-discord" />
|
||||
</div>
|
||||
<div class="social-bloodline-badge-text">Discord</div>
|
||||
</div>
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-telegram" />
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-telegram" />
|
||||
</div>
|
||||
<div class="social-bloodline-badge-text">Telegram</div>
|
||||
</div>
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-twitter" />
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-twitter" />
|
||||
</div>
|
||||
<div class="social-bloodline-badge-text">Twitter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<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="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
|
||||
<div v-if="!address" class="btn btn-immortal" @click="showPanel = true">connect</div>
|
||||
<span v-else @click="showPanel = true"> test</span>
|
||||
<div v-if="!address" class="btn btn-immortal mid-text" @click="showPanel = true">connect</div>
|
||||
<!-- <span v-else @click="showPanel = true"> test</span> -->
|
||||
<div v-else @click="showPanel = true"><img :src="getblocky(address)" alt="avatar" /></div>
|
||||
</div>
|
||||
<div v-else @click="showPanel = true">
|
||||
<div class="login-icon" v-if="!address">
|
||||
@@ -84,8 +65,70 @@ onBeforeUnmount(() => {
|
||||
</header>
|
||||
</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>
|
||||
header
|
||||
// margin-bottom: 82px
|
||||
// @media (min-width: 992px)
|
||||
// margin-bottom: 128px
|
||||
|
||||
.navbar
|
||||
position: fixed
|
||||
z-index: 3
|
||||
@@ -142,6 +185,25 @@ header
|
||||
.navbar-end
|
||||
display: flex
|
||||
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
|
||||
color: var(--white)
|
||||
background-color: var(--purple)
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="rewards-wrapper">
|
||||
<div class="rewards-headline">
|
||||
<div class="rewards-headline low-mid-text">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div class="rewards-inner">
|
||||
<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>
|
||||
<img class="bloodline-token" :src="props.image" alt="vampir" />
|
||||
@@ -27,18 +27,12 @@ const props = defineProps({
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
.rewards-headline
|
||||
font-size: 16px
|
||||
.rewards-inner, .rewards-clan-wrapper
|
||||
display: flex
|
||||
padding: 0 8px 8px 8px
|
||||
border-bottom: 1px solid var(--grey, #858585)
|
||||
.rewards-body
|
||||
align-self: center
|
||||
.rewards-coin
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.rewards-amount
|
||||
text-align: left
|
||||
font-size: 24px
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sacrifice-wrapper bloodline-wrapper">
|
||||
<div class="sacrifice-wrapper card card--glow bloodline-wrapper">
|
||||
<!-- {{ activeToken.allowance }} -->
|
||||
<div class="sacrifice-inner">
|
||||
<div class="sacrifice-headline">Select Sacrifice</div>
|
||||
@@ -32,7 +32,7 @@
|
||||
'sacrifice-from-wrapper': true,
|
||||
'bloodline-border': true,
|
||||
'bloodline-border--variant1': true,
|
||||
purple: isMobile,
|
||||
purple: true,
|
||||
}"
|
||||
>
|
||||
<div class="sarcrifice-from-input">
|
||||
@@ -63,7 +63,7 @@
|
||||
'sacrifice-from-wrapper': true,
|
||||
'bloodline-border': true,
|
||||
'bloodline-border--variant1': true,
|
||||
purple: isMobile && output && output > 0,
|
||||
purple: output && output > 0,
|
||||
}"
|
||||
>
|
||||
<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">
|
||||
<font-awesome-icon icon="chevron-down" />
|
||||
</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 class="sacrificed-info" v-if="state === 4">
|
||||
@@ -112,7 +116,7 @@
|
||||
</div>
|
||||
<div class="sacrifice-buttons-function-wrapper">
|
||||
<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
|
||||
class="btn btn-immortal"
|
||||
v-if="
|
||||
@@ -125,20 +129,19 @@
|
||||
Sacrifce
|
||||
</div>
|
||||
<div
|
||||
class="btn btn-immortal"
|
||||
class="btn btn-immortal sub-header"
|
||||
v-if="
|
||||
(!activeToken.allowance || activeToken.allowance < tokenNumber) &&
|
||||
(state === 1 || state === 4)
|
||||
"
|
||||
@click="approveToken(tokenNumber)"
|
||||
>
|
||||
Approve
|
||||
Approve Token
|
||||
</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>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- <div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div> -->
|
||||
<div class="btn btn-immortal" @click="showPanel = true">Connect</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -152,7 +155,8 @@ import { ref, defineProps, watch, inject, computed } from "vue";
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { useMemeburnerStore } from "@/stores/memeburner";
|
||||
import StakeComponent from "./StakeComponent.vue";
|
||||
import StakeComponentV1 from "@/components/StakeComponentV1.vue";
|
||||
|
||||
import { storeToRefs } from "pinia";
|
||||
import { waitForTransaction } from "@wagmi/core";
|
||||
|
||||
@@ -285,8 +289,6 @@ async function addTokens(value) {
|
||||
justify-content: center
|
||||
flex-wrap: wrap
|
||||
gap: 12px
|
||||
@media (min-width: 992px)
|
||||
justify-content: space-evenly
|
||||
|
||||
.sacrifice-token
|
||||
border-radius: 16px
|
||||
@@ -325,8 +327,8 @@ async function addTokens(value) {
|
||||
border-radius: 16px
|
||||
padding: 16px
|
||||
font-size: 16px
|
||||
gap: 16px
|
||||
.sacrifice-fees-img
|
||||
flex: 0 0 15%
|
||||
img
|
||||
height: 46px
|
||||
.sacrifice-fees-body
|
||||
@@ -344,6 +346,8 @@ async function addTokens(value) {
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 16px
|
||||
@media (min-width: 992px)
|
||||
gap: 32px
|
||||
.sacrifice-from-wrapper,.sacrifice-to-wrapper
|
||||
.sarcrifice-from-input
|
||||
display: flex
|
||||
@@ -413,7 +417,7 @@ async function addTokens(value) {
|
||||
.sacrifice-staking-bonus
|
||||
display: flex
|
||||
flex-direction: column
|
||||
padding: 4px 8px
|
||||
padding: 8px 16px
|
||||
row-gap: 8px
|
||||
border-radius: 10px
|
||||
background: var(--midnight-black, #0F0F0F)
|
||||
|
||||
@@ -45,7 +45,7 @@ function testClick(e) {
|
||||
bottom: 0
|
||||
overflow: auto
|
||||
@media (min-width: 992px)
|
||||
margin-right: -300px
|
||||
margin-right: -400px
|
||||
transition: margin-right 250ms ease 0s
|
||||
width: auto
|
||||
right: 0
|
||||
@@ -61,7 +61,8 @@ function testClick(e) {
|
||||
overflow: scroll
|
||||
height: calc( 100svh - 82px )
|
||||
@media (min-width: 992px)
|
||||
width: 300px
|
||||
width: 400px
|
||||
overflow: unset
|
||||
.slideout-icon
|
||||
cursor: pointer
|
||||
&:hover, &:active, &:focus
|
||||
|
||||
@@ -77,7 +77,7 @@ function openUnstake() {
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 16px
|
||||
&.variant1
|
||||
&.connected-stake--variant1
|
||||
background-color: transparent
|
||||
border: none
|
||||
padding: 16px 6px
|
||||
|
||||
@@ -1,16 +1,31 @@
|
||||
<template>
|
||||
<stake-component>
|
||||
<template v-slot:headline> Staked </template>
|
||||
<template v-slot:subheadline> Stake for a 25% bonus on your sacrifice. Upper limit is your stake. </template>
|
||||
<template v-slot: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="'test'"></token-logo>
|
||||
<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price>
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<div
|
||||
class="connected-stake bloodline-border white card"
|
||||
:class="{ 'card--dense': dense, 'connected-stake--variant1': variant === 1 }"
|
||||
@click="
|
||||
(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="connected-stake-headline mid-mid-text">
|
||||
<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="btn btn-immortal" disabled v-if="roundStore.currentRound === 1">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.
|
||||
</div>
|
||||
<div class="low-mid-text text-center">You can claim your stake next cycle.</div>
|
||||
</template>
|
||||
</stake-component>
|
||||
</slot>
|
||||
<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>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, useSlots } from "vue";
|
||||
import StakeComponent from "@/components/StakeComponent.vue";
|
||||
import StakeMenu from "@/components/StakeMenu.vue";
|
||||
import TokenNamePrice from "@/components/TokenNamePrice.vue";
|
||||
@@ -84,13 +108,18 @@ const walletStore = useWalletStoreV2();
|
||||
const tokenStore = useTokenStore();
|
||||
const rewardLockerStore = useRewardLockerStore();
|
||||
const roundStore = useRoundsStore();
|
||||
|
||||
const slots = useSlots();
|
||||
const props = defineProps({
|
||||
stakeonly: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
variant: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const stakeMenu = ref(false);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<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
|
||||
title="Sacrafice Reward"
|
||||
coin="$BLOOD"
|
||||
@@ -18,8 +18,8 @@
|
||||
:amount="getCurrentRoundData?.rewards_clan"
|
||||
image="/assets/img/vampir.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="rewards-list" v-else>
|
||||
</div> -->
|
||||
<div class="rewards-list">
|
||||
<rewards-wrapper
|
||||
title="Sacrafice Reward"
|
||||
coin="$BLOOD"
|
||||
@@ -41,12 +41,12 @@
|
||||
/>
|
||||
</div>
|
||||
<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-body">
|
||||
<div class="rewards-coin">$BLOOD</div>
|
||||
<div class="rewards-amount" v-if="activeRound === currentRound">0</div>
|
||||
<div class="rewards-amount" v-else>{{ getCurrentRoundData?.rewards_total }}</div>
|
||||
<div class="rewards-coin low-mid-text">$BLOOD</div>
|
||||
<div class="rewards-amount header" v-if="activeRound === currentRound">0</div>
|
||||
<div class="rewards-amount header" v-else>{{ getCurrentRoundData?.rewards_total }}</div>
|
||||
</div>
|
||||
<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
|
||||
</div>
|
||||
@@ -63,7 +63,7 @@
|
||||
</div> -->
|
||||
<div class="claim-button">
|
||||
<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 v-else-if="getCurrentRoundData?.rewards_total > 0">
|
||||
<Transition name="smooth">
|
||||
@@ -151,15 +151,13 @@ async function claimRewards() {
|
||||
display: flex
|
||||
padding: 12px
|
||||
flex-direction: column
|
||||
gap: 16px
|
||||
@media (min-width: 992px)
|
||||
padding: 32px 40px
|
||||
.claim-headline
|
||||
font-size: 18px
|
||||
text-align: left
|
||||
margin-bottom: 16px
|
||||
.claim-button
|
||||
text-align: center
|
||||
margin: 32px 0
|
||||
.stake-buttons
|
||||
display: flex
|
||||
text-align: center
|
||||
@@ -176,7 +174,6 @@ async function claimRewards() {
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
.rewards-total-headline
|
||||
font-size: 16px
|
||||
text-align: left
|
||||
.rewards-total-inner
|
||||
display: flex
|
||||
|
||||
@@ -18,7 +18,4 @@ const props = defineProps({
|
||||
height: 45px
|
||||
border-radius: 50%
|
||||
pointer-events: none
|
||||
@media (min-width: 992px)
|
||||
height: 83px
|
||||
width: auto
|
||||
</style>
|
||||
|
||||
+27
-24
@@ -5,6 +5,9 @@ import { useContractStore } from "./contracts";
|
||||
import { useMemeburnerStore } from "./memeburner";
|
||||
import Meme1Json from "@/assets/contracts/Meme1.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 { multicall, getContract, fetchToken, getWalletClient, waitForTransaction } from "@wagmi/core";
|
||||
|
||||
@@ -43,31 +46,31 @@ export const useTokenStore = defineStore("token", {
|
||||
logo: "/assets/img/token/elonvamp.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: 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,
|
||||
abi: Meme3Json.abi,
|
||||
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: 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,
|
||||
contractAddress: BloodlineJson.contractAddress,
|
||||
|
||||
+45
-32
@@ -1,43 +1,38 @@
|
||||
<template>
|
||||
<div class="cycle-page">
|
||||
<div class="cycle-header container">
|
||||
<div class="bloodline-page-headline">Cycle</div>
|
||||
<div class="bloodline-page-description">
|
||||
Claim and trade your $BDL at each cycle's end. Become the most powerful meme clan each cycle and win
|
||||
<div class="cycle-header container container--variant1">
|
||||
<div class="bloodline-page-headline header">Bloodline Cycle</div>
|
||||
<div class="bloodline-page-description low-mid-text">
|
||||
Claim and trade your $BLOOD at each cycle's end. Become the most powerful meme clan each cycle to win
|
||||
extra rewards.
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-wrapper">
|
||||
<div class="slider-wrapper" :class="{ sticking: sticking }" ref="target">
|
||||
<font-awesome-icon
|
||||
:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
|
||||
@click="prevSlide"
|
||||
: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
|
||||
:class="{ 'slider-next': true, disabled: roundsStore.currentRound === roundsStore.activeRound }"
|
||||
@click="nextSlide"
|
||||
:icon="['fas', 'caret-right']"
|
||||
/>
|
||||
</div>
|
||||
<div class="cycle card bloodline-wrapper container">
|
||||
<div class="bloodline-border" v-if="difference > 0 && roundsStore.currentRound === roundsStore.activeRound">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Sacrifice:</td>
|
||||
<td class="divider"></td>
|
||||
<!-- <td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td> -->
|
||||
<td>{{ roundsStore.getCurrentRoundData?.goalInBLD }} $BDL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Time left:</td>
|
||||
<td class="divider"></td>
|
||||
<td v-if="roundsStore.currentRound === roundsStore.activeRound">
|
||||
{{ days }} {{ hours }} {{ minutes }}
|
||||
</td>
|
||||
<td v-else>0</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="cycle card card--glow container container--variant1 bloodline-wrapper">
|
||||
<div
|
||||
class="bloodline-border round-finish-info low-mid-text"
|
||||
v-if="difference > 0 && roundsStore.currentRound === roundsStore.activeRound"
|
||||
>
|
||||
<!-- <div class="round-finish-info-element low-mid-text"> -->
|
||||
<div class="round-finish-info-key">Sacrifice Goal:</div>
|
||||
<div class="round-finish-info-value">{{ roundsStore.getCurrentRoundData?.goalInBLD }} $BDL</div>
|
||||
<!-- </div> -->
|
||||
<!-- <div class="round-finish-info-element low-mid-text"> -->
|
||||
<div class="round-finish-info-key">Time left:</div>
|
||||
<div class="round-finish-info-value">{{ days }} {{ hours }} {{ minutes }}</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<template v-if="roundsStore.currentRound !== roundsStore.activeRound">
|
||||
<div
|
||||
@@ -71,7 +66,7 @@
|
||||
<token-claim></token-claim>
|
||||
|
||||
<div class="bloodline-clan">
|
||||
<h3>Bloodline Clan</h3>
|
||||
<div class="sub-header">Bloodline Clan</div>
|
||||
<p>
|
||||
Win extra rewards for you and your clan. Increase the strength of your bloodline by sacrificing more
|
||||
memes.
|
||||
@@ -119,6 +114,9 @@ const minutes = ref(null);
|
||||
const seconds = ref(null);
|
||||
const timer = ref(null);
|
||||
const difference = ref(null);
|
||||
const target = ref();
|
||||
const sticking = ref(false);
|
||||
|
||||
const memeBurnerStore = useMemeburnerStore();
|
||||
const rewardLockerStore = useRewardLockerStore();
|
||||
|
||||
@@ -130,7 +128,6 @@ onMounted(async () => {
|
||||
// await rewardLockerStore.init();
|
||||
|
||||
if (!roundsStore.currentRound) {
|
||||
console.log("test");
|
||||
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
|
||||
console.log("roundsStore.currentRound", roundsStore.currentRound);
|
||||
roundsStore.activeRound = roundsStore.currentRound;
|
||||
@@ -194,15 +191,12 @@ function timeBetweenDates(expirationTimestamp) {
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
|
||||
.cycle-header
|
||||
.bloodline-page-headline
|
||||
text-align: center
|
||||
font-size: 32px
|
||||
margin-bottom: 32px
|
||||
.bloodline-page-description
|
||||
text-align: center
|
||||
font-size: 16px
|
||||
|
||||
.slider-wrapper
|
||||
display: flex
|
||||
@@ -214,8 +208,10 @@ function timeBetweenDates(expirationTimestamp) {
|
||||
z-index: 3
|
||||
background: #2D2D2D
|
||||
padding: 16px 0
|
||||
&:stuck
|
||||
background-color: red
|
||||
@media (min-width: 992px)
|
||||
position: unset
|
||||
top: 127px
|
||||
.slider-text
|
||||
margin: 0 24px
|
||||
margin-top: auto
|
||||
@@ -223,6 +219,9 @@ function timeBetweenDates(expirationTimestamp) {
|
||||
.slider-prev, .slider-next
|
||||
color: var(--purple)
|
||||
font-size: 40px
|
||||
@media (min-width: 992px)
|
||||
font-size: 60px
|
||||
|
||||
cursor: pointer
|
||||
&:hover,&:active, &:focus
|
||||
filter: brightness(0.80)
|
||||
@@ -233,13 +232,16 @@ function timeBetweenDates(expirationTimestamp) {
|
||||
|
||||
|
||||
.bloodline-wrapper
|
||||
background: var(--dark-grey, #202020)
|
||||
padding-top: 24px
|
||||
border-bottom-left-radius: unset
|
||||
border-bottom-right-radius: unset
|
||||
gap: 24px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
text-align: center
|
||||
border-bottom-left-radius: unset
|
||||
border-bottom-right-radius: unset
|
||||
@media (min-width: 992px)
|
||||
border-radius: 16px
|
||||
|
||||
.cycle-winner
|
||||
padding: 8px 24px
|
||||
@@ -271,4 +273,15 @@ function timeBetweenDates(expirationTimestamp) {
|
||||
display: flex
|
||||
flex-direction: column
|
||||
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>
|
||||
|
||||
+61
-53
@@ -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>
|
||||
import { ref, computed, inject, onMounted, onBeforeUnmount } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import SacrificeToken from "@/components/SacrificeToken.vue";
|
||||
import { Collapse } from "vue-collapsed";
|
||||
|
||||
// import { useWalletStore } from "@/stores/wallet";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
@@ -11,64 +54,27 @@ const roundsStore = useRoundsStore();
|
||||
const { getCurrentRoundData } = storeToRefs(roundsStore);
|
||||
|
||||
const { currentRound, activeRound, rounds } = storeToRefs(roundsStore);
|
||||
|
||||
const tutorialWrapper = ref(null);
|
||||
const openTutorial = ref(false);
|
||||
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>
|
||||
|
||||
<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">
|
||||
.header-text
|
||||
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
|
||||
font-size: 32px
|
||||
text-align: center
|
||||
margin-top: 64px
|
||||
margin-bottom: 100px
|
||||
margin-top: 24px
|
||||
margin-bottom: 48px
|
||||
@media (min-width: 992px)
|
||||
font-size: 64px
|
||||
margin-top: 0px
|
||||
@@ -100,8 +106,8 @@ const isMobile = inject("isMobile");
|
||||
th
|
||||
padding-right: 16px
|
||||
#tokenomics
|
||||
background-color: var(--darkgrey)
|
||||
>div
|
||||
background-color: var(--darkgrey)
|
||||
text-align: center
|
||||
img
|
||||
display: block
|
||||
@@ -129,20 +135,19 @@ const isMobile = inject("isMobile");
|
||||
|
||||
|
||||
|
||||
.section-header-container
|
||||
#section-header-container
|
||||
margin: 24px 0
|
||||
scroll-margin: 150px
|
||||
.tutorial-header
|
||||
display: flex
|
||||
justify-content: center
|
||||
gap: 16px
|
||||
font-size: 24px
|
||||
margin-bottom: 24px
|
||||
.tutorial-wrapper
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 24px
|
||||
.tutorial-text
|
||||
font-size: 18px
|
||||
text-align: center
|
||||
.tutorial-footer
|
||||
text-align: center
|
||||
@@ -166,4 +171,7 @@ const isMobile = inject("isMobile");
|
||||
|
||||
h2
|
||||
font-size: 40px
|
||||
|
||||
.content
|
||||
background: grey
|
||||
</style>
|
||||
|
||||
@@ -1,34 +1,12 @@
|
||||
<template>
|
||||
<div class="profile-page container">
|
||||
<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-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 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-headline mid-text text-center">Total Rewards</div>
|
||||
<claim-component></claim-component>
|
||||
@@ -214,7 +192,6 @@ onMounted(async () => {
|
||||
|
||||
console.log("loadRounds");
|
||||
if (!roundsStore.currentRound) {
|
||||
console.log("test");
|
||||
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
|
||||
console.log("roundsStore.currentRound", roundsStore.currentRound);
|
||||
roundsStore.activeRound = roundsStore.currentRound;
|
||||
@@ -250,7 +227,6 @@ const rounds = computed(() => {
|
||||
.profile-headline
|
||||
color: #FFF
|
||||
text-align: center
|
||||
font-size: 32px
|
||||
.profile-subheader
|
||||
display: flex
|
||||
justify-content: center
|
||||
@@ -261,8 +237,6 @@ const rounds = computed(() => {
|
||||
width: 21px
|
||||
height: 21px
|
||||
border-radius: 20%
|
||||
.profile-subheader-address
|
||||
font-size: 12px
|
||||
.total-rewards-wrapper
|
||||
border-radius: 16px
|
||||
background: var(--darkgrey, #202020)
|
||||
|
||||
Reference in New Issue
Block a user