314 lines
11 KiB
Vue
314 lines
11 KiB
Vue
<template>
|
|
<div class="profile-page container">
|
|
<div class="profile-header">
|
|
<div class="profile-headline header">Profile</div>
|
|
<div class="profile-subheader" v-if="walletStore.connected">
|
|
<div class="profile-subheader-logo"><img :src="getblocky(walletStore.address)" alt="" /></div>
|
|
<div class="mid-mid-text">{{ getAddressShortName(walletStore.address) }}</div>
|
|
</div>
|
|
</div>
|
|
<template v-if="!walletStore.connected">
|
|
<div class="profile-not-connected low-mid-text">
|
|
Connect your wallet to see your profile.
|
|
<div class="btn btn-immortal" @click="showPanel = true">Connect</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="total-rewards-wrapper">
|
|
<div class="total-rewards-headline mid-text text-center">Total Rewards</div>
|
|
<claim-component></claim-component>
|
|
</div>
|
|
<template v-if="!isMobile">
|
|
<stake-component-v1 :variant="2"> </stake-component-v1>
|
|
</template>
|
|
<template v-else>
|
|
<stake-component-v1> </stake-component-v1>
|
|
</template>
|
|
|
|
<div class="most-sacrificed-wrapper" v-if="false">
|
|
<div class="most-sacrificed-inner">
|
|
<div class="most-sacrificed-left">
|
|
<div class="most-sacrificed-header">Bloodline Clan</div>
|
|
<div class="most-sacrificed-subheader">Most sacrificed</div>
|
|
</div>
|
|
<div class="most-sacrificed-right">
|
|
<div class="most-sacrificed-coin-logo">
|
|
<img src="/assets/img/token/pepevamp.png" alt="" />
|
|
</div>
|
|
<div class="most-sacrificed-coin-name">$PEPE</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="total-sacrificed-wrapper" v-if="false">
|
|
<div class="total-sacrificed-inner">
|
|
<div class="total-sacrificed-header">Total Sacrifice</div>
|
|
<div class="total-sacrificed-coins">
|
|
<div class="total-sacrificed-coin">
|
|
<div class="total-sacrificed-coin-amount">1,2b</div>
|
|
<div class="total-sacrificed-coin-logo">
|
|
<img src="/assets/img/token/pepevamp.png" alt="" />
|
|
</div>
|
|
<div class="total-sacrificed-coin-name">$PEPE</div>
|
|
</div>
|
|
<div class="total-sacrificed-coin">
|
|
<div class="total-sacrificed-coin-amount">139m</div>
|
|
<div class="total-sacrificed-coin-logo">
|
|
<img src="/assets/img/token/shibvamp.png" alt="" />
|
|
</div>
|
|
<div class="total-sacrificed-coin-name">$SHIB</div>
|
|
</div>
|
|
<div class="total-sacrificed-coin">
|
|
<div class="total-sacrificed-coin-amount">0</div>
|
|
<div class="total-sacrificed-coin-logo">
|
|
<img src="/assets/img/token/elonvamp.png" alt="" />
|
|
</div>
|
|
<div class="total-sacrificed-coin-name">$ELON</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed, inject } from "vue";
|
|
import { useCycleStore } from "@/stores/cycles";
|
|
import { useWalletStoreV2 } from "@/stores/walletV2";
|
|
|
|
import { getblocky, getAddressShortName } from "@/helper/helper.js";
|
|
import StakeComponentV1 from "@/components/StakeComponentV1.vue";
|
|
import ClaimComponent from "@/components/ClaimComponent.vue";
|
|
|
|
import { useMemeburnerStore } from "@/stores/memeburner";
|
|
|
|
const cycleStore = useCycleStore();
|
|
const walletStore = useWalletStoreV2();
|
|
const memeBurnerStore = useMemeburnerStore();
|
|
const isMobile = inject("isMobile");
|
|
const showPanel = inject("showPanel");
|
|
|
|
onMounted(async () => {
|
|
//todo check that code, probably old stuff
|
|
if (!cycleStore.currentCycle) {
|
|
cycleStore.currentCycle = parseInt(await memeBurnerStore.getCurrentCycle());
|
|
console.log("cycleStore.currentCycle", cycleStore.currentCycle);
|
|
cycleStore.activeCycle = cycleStore.currentCycle;
|
|
}
|
|
console.log("cycleStore.cycles", cycleStore.cycles);
|
|
});
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.profile-page
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 24px
|
|
.profile-header
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 8px
|
|
.profile-headline
|
|
color: #FFF
|
|
text-align: center
|
|
.profile-subheader
|
|
display: flex
|
|
justify-content: center
|
|
gap: 12px
|
|
align-items: center
|
|
.profile-subheader-logo
|
|
img
|
|
width: 21px
|
|
height: 21px
|
|
border-radius: 20%
|
|
@media (min-width: 992px)
|
|
width: 32px
|
|
height: 32px
|
|
|
|
.total-rewards-wrapper
|
|
border-radius: 16px
|
|
background: var(--darkgrey, #202020)
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 18px
|
|
padding: 8px
|
|
@media (min-width: 992px)
|
|
padding: 24px 48px
|
|
.total-rewards-inner
|
|
border-radius: 16px
|
|
border: 2px solid var(--grey, #858585)
|
|
background: var(--darkgrey, #202020)
|
|
padding: 8px 12px
|
|
gap: 16px
|
|
display: flex
|
|
flex-direction: column
|
|
.claim-wrapper
|
|
.claim-inner
|
|
display: flex
|
|
flex-direction: row
|
|
.claim-header
|
|
color: var(--white, #F9F9FA)
|
|
font-size: 18px
|
|
text-align: center
|
|
.claim-body
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 4px
|
|
.bloodline-token
|
|
margin-left: auto
|
|
.claim-hr
|
|
background-color: #858585
|
|
margin: 16px 0
|
|
height: 1px
|
|
.total-rewards-buttons
|
|
display: flex
|
|
text-align: center
|
|
gap: 16px
|
|
justify-content: space-between
|
|
div
|
|
flex: 1 1 auto
|
|
font-size: 18px
|
|
.profile-stake
|
|
padding: 0 8px
|
|
|
|
|
|
|
|
.most-sacrificed-wrapper
|
|
.most-sacrificed-inner
|
|
padding: 8px
|
|
border-radius: 16px
|
|
border: 1px solid var(--grey, #858585)
|
|
background: var(--dark-grey, #202020)
|
|
gap: 34px
|
|
display: flex
|
|
justify-content: center
|
|
.most-sacrificed-left
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
.most-sacrificed-header
|
|
font-size: 24px
|
|
.most-sacrificed-subheader
|
|
font-size: 12px
|
|
.most-sacrificed-right
|
|
display: flex
|
|
flex-direction: column
|
|
.most-sacrificed-coin-logo
|
|
img
|
|
width: 49px
|
|
height: 49px
|
|
border-radius: 50%
|
|
|
|
|
|
|
|
.total-sacrificed-wrapper
|
|
background-color: var(--dark-grey, #202020)
|
|
border-radius: 16px
|
|
border: 1px solid var(--grey, #858585)
|
|
padding: 8px
|
|
.total-sacrificed-inner
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
gap: 16px
|
|
.total-sacrificed-header
|
|
font-size: 18px
|
|
.total-sacrificed-coins
|
|
display: flex
|
|
gap: 27px
|
|
.total-sacrificed-coin
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 8px
|
|
text-align: center
|
|
.total-sacrificed-coin-logo
|
|
img
|
|
height: 49px
|
|
width: 49px
|
|
border-radius: 50%
|
|
|
|
|
|
|
|
.cycle-wrapper
|
|
margin-top: 24px
|
|
.cycle-inner
|
|
.cycle-headline
|
|
font-size: 24px
|
|
margin-bottom: 8px
|
|
text-align: center
|
|
.cycle-header
|
|
display: flex
|
|
justify-content: space-between
|
|
padding: 8px 16px
|
|
font-size: 18px
|
|
.cycle-cycles
|
|
gap: 8px
|
|
display: flex
|
|
flex-direction: column
|
|
.cycle-round
|
|
border-radius: 16px
|
|
border: 3px solid var(--grey, #858585)
|
|
background: var(--dark-grey, #202020)
|
|
padding: 12px
|
|
min-height: 55px
|
|
.cycle-round-inner
|
|
display: flex
|
|
font-size: 18px
|
|
gap: 8px
|
|
align-items: center
|
|
// .cycle-round-number
|
|
.cycle-round-badget
|
|
border-radius: 14px
|
|
border: 1px solid var(--grey, #858585)
|
|
padding: 8px 16px
|
|
height: 25px
|
|
color: var(--grey, #858585)
|
|
text-align: center
|
|
font-size: 14px
|
|
display: flex
|
|
align-items: center
|
|
margin-left: auto
|
|
.cycle-round-reward
|
|
margin-left: auto
|
|
.cycle-round-more
|
|
font-size: 16px
|
|
.cycle-round-detail
|
|
.cycle-round-detail-inner
|
|
.sacrifice-reward-wrapper
|
|
border-radius: 16px
|
|
border: 0.5px solid var(--grey, #858585)
|
|
margin-top: 12px
|
|
.sacrifice-reward-inner
|
|
padding: 8px 16px
|
|
.sacrifice-reward-header
|
|
display: flex
|
|
font-size: 18px
|
|
justify-content: space-between
|
|
margin-bottom: 16px
|
|
.sacrifice-coins
|
|
margin-left: auto
|
|
border-collapse: separate
|
|
border-spacing: 0 12px
|
|
.sacrifice-coin
|
|
td
|
|
text-align: right
|
|
img
|
|
height: 40px
|
|
width: 40px
|
|
border-radius: 50%
|
|
.arrow
|
|
width: 14px
|
|
padding: 0 16px
|
|
|
|
|
|
|
|
.profile-not-connected
|
|
border-radius: 16px
|
|
padding: 16px
|
|
gap: 16px
|
|
display: flex
|
|
flex-direction: column
|
|
text-align: center
|
|
background: var(--darkgrey, #202020)
|
|
</style>
|