365 lines
12 KiB
Vue
365 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div class="profile-header">Profile</div>
|
|
<div class="profile-subheader">
|
|
<div class="profile-subheader-logo"><img src="/assets/img/Icon.png" alt="" /></div>
|
|
<div class="profile-subheader-address">0x12345...812d</div>
|
|
</div>
|
|
<div class="total-rewards-wrapper">
|
|
<div class="total-rewards-headline">Total Rewards</div>
|
|
<div class="total-rewards-inner">
|
|
<div class="claim-wrapper">
|
|
<div class="claim-inner">
|
|
<div class="claim-header">Claimed</div>
|
|
<div class="claim-body">TODO</div>
|
|
</div>
|
|
</div>
|
|
<div class="claim-hr"></div>
|
|
<div class="claim-wrapper">
|
|
<div class="claim-inner">
|
|
<div class="claim-header">Unclaimed</div>
|
|
<div class="claim-body">TODO</div>
|
|
</div>
|
|
</div>
|
|
<div class="total-rewards-buttons">
|
|
<div class="btn btn-immortal">Stake</div>
|
|
<div class="btn btn-immortal">Unstake</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="most-sacrificed-wrapper">
|
|
<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">
|
|
<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>
|
|
|
|
<div class="cycle-wrapper">
|
|
<div class="cycle-inner">
|
|
<div class="cycle-headline">Cycles</div>
|
|
<div class="cycle-header">
|
|
<div class="cycle-header-left">Cycle</div>
|
|
<div class="cycle-header-right">Reward</div>
|
|
</div>
|
|
<div class="cycle-rounds">
|
|
<div class="cycle-round" v-for="(round, index) in rounds" :key="index">
|
|
<template v-if="round">
|
|
<div class="cycle-round-inner">
|
|
<div class="cycle-round-number">{{ round.round }}</div>
|
|
<div class="cycle-round-badget" v-if="roundsStore.currentRound === round.round">
|
|
active
|
|
</div>
|
|
<div class="cycle-round-reward">
|
|
{{ Number(round.rewards_total / BigInt(Math.pow(10, 18))) }} $BDL
|
|
</div>
|
|
<div class="cycle-round-more" @click="openRound(index)">
|
|
<font-awesome-icon
|
|
v-if="openCycleElement && index === activeRound"
|
|
icon="chevron-up"
|
|
/>
|
|
<font-awesome-icon v-else icon="chevron-down" />
|
|
</div>
|
|
</div>
|
|
<div class="cycle-round-detail" v-if="openCycleElement && index === activeRound">
|
|
<div class="cycle-round-detail-inner">
|
|
<div class="sacrifice-reward-wrapper">
|
|
<div class="sacrifice-reward-inner">
|
|
<div class="sacrifice-reward-header">
|
|
<div class="sacrifice-reward-header-name">Sacrifice Reward</div>
|
|
<div class="sacrifice-reward-header-amount">+2,000 $BDL</div>
|
|
</div>
|
|
<table class="sacrifice-coins">
|
|
<tr class="sacrifice-coin">
|
|
<td>2b PEPE</td>
|
|
<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
|
|
<td>1,500 $BDL</td>
|
|
</tr>
|
|
<tr class="sacrifice-coin">
|
|
<td>10m SHIB</td>
|
|
<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
|
|
<td class="bloodline">500 $BDL</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="sacrifice-reward-wrapper">
|
|
<div class="sacrifice-reward-inner">
|
|
<div class="sacrifice-reward-header">
|
|
<div class="sacrifice-reward-header-name">Staking Bonus</div>
|
|
<div class="sacrifice-reward-header-amount">+1,000 $BDL</div>
|
|
</div>
|
|
<table class="sacrifice-coins">
|
|
<tr class="sacrifice-coin">
|
|
<td>Staked</td>
|
|
<td class="arrow"></td>
|
|
<td class="bloodline">1,000 $BDL</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="sacrifice-reward-wrapper">
|
|
<div class="sacrifice-reward-inner">
|
|
<div class="sacrifice-reward-header">
|
|
<div class="sacrifice-reward-header-name">Competition Bonus</div>
|
|
<div class="sacrifice-reward-header-amount">+200 $BDL</div>
|
|
</div>
|
|
<table class="sacrifice-coins">
|
|
<div class="sacrifice-coin">
|
|
<div><img src="/assets/img/winner.png" alt="" /></div>
|
|
<div><img src="/assets/img/token/pepevamp.png" alt="" /></div>
|
|
<div>$PEPE</div>
|
|
<div class="arrow"></div>
|
|
<div class="bloodline">1,000 $BDL</div>
|
|
</div>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from "vue";
|
|
import { useRoundsStore } from "@/stores/rounds";
|
|
|
|
const roundsStore = useRoundsStore();
|
|
|
|
const activeRound = ref(null);
|
|
const openCycleElement = ref(false);
|
|
function openRound(index) {
|
|
if (activeRound.value === index && openCycleElement.value) {
|
|
openCycleElement.value = false;
|
|
} else {
|
|
openCycleElement.value = true;
|
|
}
|
|
activeRound.value = index;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
console.log("loadRounds");
|
|
await roundsStore.loadRewardsRounds();
|
|
console.log("roundsStore.rounds", roundsStore.rounds);
|
|
});
|
|
|
|
const rounds = computed(() => roundsStore.rounds.reverse());
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.profile-header
|
|
color: #FFF
|
|
text-align: center
|
|
font-size: 32px
|
|
margin-bottom: 12px
|
|
.profile-subheader
|
|
display: flex
|
|
justify-content: center
|
|
gap: 12px
|
|
align-items: center
|
|
// .profile-subheader-logo
|
|
margin-bottom: 24px
|
|
.profile-subheader-address
|
|
font-size: 12px
|
|
.total-rewards-wrapper
|
|
border-radius: 16px
|
|
background: #202020
|
|
padding: 8px
|
|
.total-rewards-headline
|
|
color: #FFF
|
|
text-align: center
|
|
font-size: 24px
|
|
margin-bottom: 24px
|
|
.total-rewards-inner
|
|
border-radius: 16px
|
|
border: 2px solid var(--grey, #858585)
|
|
background: var(--dark-grey, #202020)
|
|
padding: 8px 12px
|
|
.claim-wrapper
|
|
.claim-inner
|
|
flex-direction: column
|
|
margin-bottom: 16px
|
|
.claim-header
|
|
color: var(--white, #F9F9FA)
|
|
font-size: 18px
|
|
text-align: center
|
|
margin-bottom: 16px
|
|
.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
|
|
|
|
|
|
|
|
.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-rounds
|
|
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
|
|
.arrow
|
|
width: 14px
|
|
padding: 0 16px
|
|
</style>
|