update cycleview, pageview + profileview
This commit is contained in:
EmberSpirit
@@ -9,28 +9,28 @@
|
||||
</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)}%`">
|
||||
<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="wrapper">
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
@@ -60,7 +60,7 @@ import { useMemeburnerStore } from "@/stores/memeburner";
|
||||
const memeBurnerStore = useMemeburnerStore();
|
||||
|
||||
const props = defineProps({
|
||||
data: Array,
|
||||
data: Object,
|
||||
});
|
||||
|
||||
console.log(props.data);
|
||||
@@ -126,23 +126,21 @@ function getImageUrl(url) {
|
||||
flex: 0 0 500px
|
||||
border-radius: 8px 8px 40px 40px
|
||||
text-align: left
|
||||
overflow: hidden
|
||||
.blood-chart-bar-wrapper
|
||||
height: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.blood-chart-bar
|
||||
.waves
|
||||
margin-top: auto
|
||||
.blood-chart-bar
|
||||
background-color: var(--blood-color)
|
||||
position: relative
|
||||
border-radius: 0 0 40px 40px
|
||||
.blood-chart-bar-percentage
|
||||
font-size: 14px
|
||||
text-align: center
|
||||
.waves
|
||||
position: absolute
|
||||
top: -10px
|
||||
width: 100%
|
||||
height: 10px
|
||||
|
||||
.blood-chart-element-footer
|
||||
margin-top: 32px
|
||||
text-align: center
|
||||
|
||||
@@ -45,25 +45,7 @@
|
||||
<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
|
||||
</div>
|
||||
</div>
|
||||
<div class="connected-stake bloodline-border white">
|
||||
<div class="connected-stake-headline">Staked</div>
|
||||
<div class="connected-stake-subheadline">Increase your sacrifice reward by staking.</div>
|
||||
<div class="connected-stake-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>
|
||||
</div>
|
||||
<div class="connected-stake-buttons" v-if="!stakeMenu">
|
||||
<div class="btn btn-immortal" @click="openStake">Stake</div>
|
||||
<div class="btn btn-immortal" @click="openUnstake">Unstake</div>
|
||||
</div>
|
||||
<Transition>
|
||||
<stake-menu @close="stakeMenu = false" :stake="stake" v-if="stakeMenu"></stake-menu>
|
||||
</Transition>
|
||||
</div>
|
||||
<stake-component></stake-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -74,16 +56,15 @@ import { useTokenStore } from "@/stores/tokens";
|
||||
import Meme1Json from "@/assets/contracts/Meme1.json";
|
||||
import TokenNamePrice from "./TokenNamePrice.vue";
|
||||
import TokenLogo from "./TokenLogo.vue";
|
||||
import StakeComponent from "./StakeComponent.vue";
|
||||
import TokenInput from "./TokenInput.vue";
|
||||
import StakeMenu from "./StakeMenu.vue";
|
||||
import { getAddressShortName, getblocky } from "@/helper/helper.js";
|
||||
|
||||
import { disconnect } from "@wagmi/core";
|
||||
|
||||
const walletStore = useWalletStoreV2();
|
||||
const tokenStore = useTokenStore();
|
||||
const stakeMenu = ref(false);
|
||||
const stake = ref(null);
|
||||
|
||||
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||
|
||||
const fromAddress = ref(null);
|
||||
@@ -108,16 +89,6 @@ async function connectWallet(connector) {
|
||||
instance.parent.emit("update:modelValue", false);
|
||||
await walletStore.connectWallet(toRaw(connector));
|
||||
}
|
||||
|
||||
function openStake() {
|
||||
stake.value = true;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
|
||||
function openUnstake() {
|
||||
stake.value = false;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<div class="rewards-wrapper">
|
||||
<div class="rewards-header">
|
||||
<div class="rewards-header-title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div class="rewards-header-info">{{ props.info }}</div>
|
||||
<div class="rewards-headline">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div class="rewards-sacrifice-wrapper bloodline-border bloodline-border--variant1">
|
||||
<div class="rewards-inner">
|
||||
<div class="rewards-body">
|
||||
<div class="rewards-coin">$BLOOD</div>
|
||||
<div class="rewards-amount">{{ props.amount }}</div>
|
||||
@@ -26,29 +23,30 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.rewards-header
|
||||
font-size: 16px
|
||||
padding: 8px
|
||||
.rewards-wrapper
|
||||
display: flex
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.rewards-header-info
|
||||
margin-left: auto
|
||||
.rewards-sacrifice-wrapper, .rewards-clan-wrapper
|
||||
display: flex
|
||||
.rewards-body
|
||||
align-self: center
|
||||
.rewards-coin
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
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
|
||||
.rewards-amount
|
||||
font-size: 24px
|
||||
margin-top: 8px
|
||||
@media (min-width: 992px)
|
||||
font-size: 40px
|
||||
margin-top: 0
|
||||
img
|
||||
margin-left: auto
|
||||
align-self: center
|
||||
margin-top: 8px
|
||||
@media (min-width: 992px)
|
||||
font-size: 40px
|
||||
margin-top: 0
|
||||
img
|
||||
margin-left: auto
|
||||
align-self: center
|
||||
</style>
|
||||
|
||||
@@ -51,7 +51,7 @@ function testClick(e) {
|
||||
right: 0
|
||||
bottom: unset
|
||||
&.open
|
||||
margin-bottom: -10vh
|
||||
margin-bottom: -82px
|
||||
@media (min-width: 992px)
|
||||
margin-right: 0
|
||||
.slideout-panel
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="connected-stake bloodline-border white">
|
||||
<div class="connected-stake-headline">Staked</div>
|
||||
<div class="connected-stake-subheadline">Increase your sacrifice reward by staking.</div>
|
||||
<div class="connected-stake-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>
|
||||
</div>
|
||||
<div class="connected-stake-buttons" v-if="!stakeMenu">
|
||||
<div class="btn btn-immortal" @click="openStake">Stake</div>
|
||||
<div class="btn btn-immortal" @click="openUnstake">Unstake</div>
|
||||
</div>
|
||||
<Transition>
|
||||
<stake-menu @close="stakeMenu = false" :stake="stake" v-if="stakeMenu"></stake-menu>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
|
||||
import { ref } from "vue";
|
||||
import StakeMenu from "./StakeMenu.vue";
|
||||
import TokenNamePrice from "./TokenNamePrice.vue";
|
||||
import TokenLogo from "./TokenLogo.vue";
|
||||
|
||||
const walletStore = useWalletStoreV2();
|
||||
const tokenStore = useTokenStore();
|
||||
|
||||
const stakeMenu = ref(false);
|
||||
const stake = ref(null);
|
||||
|
||||
function openStake() {
|
||||
stake.value = true;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
|
||||
function openUnstake() {
|
||||
stake.value = false;
|
||||
stakeMenu.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass"></style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="claim bloodline-border">
|
||||
<div class="claim bloodline-border bloodline-border__thin grey">
|
||||
<div class="claim-headline">You Cycle Rewards</div>
|
||||
<div class="rewards-wrapper" v-if="!isMobile">
|
||||
<rewards-wrapper
|
||||
title="Sacrafice Reward"
|
||||
@@ -18,16 +19,25 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="rewards-list" v-else>
|
||||
<rewards-wrapper title="Total Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
|
||||
<rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
|
||||
<rewards-wrapper
|
||||
title="Total Stake Reward"
|
||||
title="Staking Bonus"
|
||||
coin="$BLOOD"
|
||||
amount="0"
|
||||
amount="0 todo"
|
||||
info="max: 312m"
|
||||
image="/assets/img/vampir.png"
|
||||
/>
|
||||
<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
|
||||
<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
|
||||
</div>
|
||||
<div class="rewards-total-wrapper">
|
||||
<div class="rewards-total-headline">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">todo</div>
|
||||
</div>
|
||||
<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="claim-button">
|
||||
<div v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div>
|
||||
@@ -72,10 +82,14 @@ async function claimRewards() {
|
||||
<style lang="sass">
|
||||
.claim
|
||||
display: flex
|
||||
padding: 32px 20px
|
||||
padding: 12px
|
||||
flex-direction: column
|
||||
@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
|
||||
@@ -89,4 +103,29 @@ async function claimRewards() {
|
||||
margin-bottom: 16px
|
||||
.rewards-divider
|
||||
text-align: center
|
||||
|
||||
.rewards-total-wrapper
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
.rewards-total-headline
|
||||
font-size: 16px
|
||||
text-align: left
|
||||
.rewards-total-inner
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
text-align: left
|
||||
.rewards-left
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
.name
|
||||
font-size: 16px
|
||||
.amount
|
||||
font-size: 24px
|
||||
.rewards-right
|
||||
img
|
||||
height: 49px
|
||||
width: 49px
|
||||
border-radius: 50%
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user