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
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>