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",
"viem": "^1.4.1",
"vue": "^3.3.2",
"vue-collapsed": "^1.2.8",
"vue-router": "^4.2.0"
},
"devDependencies": {
@@ -5769,6 +5770,11 @@
"@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": {
"version": "9.3.1",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz",
package.json
+1
View File
@@ -22,6 +22,7 @@
"swiper": "^9.4.1",
"viem": "^1.4.1",
"vue": "^3.3.2",
"vue-collapsed": "^1.2.8",
"vue-router": "^4.2.0"
},
"devDependencies": {
src/App.vue
+17 -3
View File
@@ -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
src/assets/sass/buttons.sass
-1
View File
@@ -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
src/assets/sass/main.sass
+6 -4
View File
@@ -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
src/assets/sass/variables.sass
+28 -1
View File
@@ -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)
src/components/BloodChart.vue
+62 -3
View File
@@ -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
src/components/ConnectWallet.vue
+5 -1
View File
@@ -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
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>
<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)
src/components/RewardsWrapper.vue
+2 -8
View File
@@ -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
src/components/SacrificeToken.vue
+18 -14
View File
@@ -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)
src/components/SlideoutPanel.vue
+3 -2
View File
@@ -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
src/components/StakeComponent.vue
+1 -1
View File
@@ -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
src/components/StakeComponentV1.vue
+45 -16
View File
@@ -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);
src/components/TokenClaim.vue
+10 -13
View File
@@ -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
src/components/TokenLogo.vue
-3
View File
@@ -18,7 +18,4 @@ const props = defineProps({
height: 45px
border-radius: 50%
pointer-events: none
@media (min-width: 992px)
height: 83px
width: auto
</style>
src/stores/tokens.js
+27 -24
View File
@@ -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,
src/views/CycleView.vue
+45 -32
View File
@@ -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>
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>
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>
src/views/ProfileView.vue
+2 -28
View File
@@ -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)
yarn.lock
+433 -919
View File
File diff suppressed because it is too large Load Diff