update profilepage
This commit is contained in:
EmberSpirit
+240
-192
@@ -1,33 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="profile-header">Profile</div>
|
||||
<div class="profile-subheader">
|
||||
<div class="profile-subheader-logo"><img :src="getblocky(walletStore.address)" alt="" /></div>
|
||||
<div class="profile-subheader-address">0x12345...812d</div>
|
||||
<div class="profile-page container">
|
||||
<div class="profile-header">
|
||||
<div class="profile-headline">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>
|
||||
</div>
|
||||
<div class="total-rewards-wrapper">
|
||||
<div class="total-rewards-headline">Total Rewards</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-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 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 class="btn btn-immortal">Unstake</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>
|
||||
</div>
|
||||
<stake-component-v1></stake-component-v1>
|
||||
<div class="profile-stake">
|
||||
<!-- <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>
|
||||
</stake-component> -->
|
||||
</div>
|
||||
<stake-component></stake-component>
|
||||
|
||||
<div class="most-sacrificed-wrapper" v-if="false">
|
||||
<div class="most-sacrificed-inner">
|
||||
@@ -72,7 +86,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cycle-wrapper">
|
||||
<!-- <div class="cycle-wrapper">
|
||||
<div class="cycle-inner">
|
||||
<div class="cycle-headline">Cycles</div>
|
||||
<div class="cycle-header">
|
||||
@@ -145,13 +159,13 @@
|
||||
<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>
|
||||
<tr class="sacrifice-coin">
|
||||
<td><img src="/assets/img/winner.png" alt="" /></td>
|
||||
<td><img src="/assets/img/token/pepevamp.png" alt="" /></td>
|
||||
<td>$PEPE</td>
|
||||
<td class="arrow"></td>
|
||||
<td class="bloodline">1,000 $BDL</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,7 +175,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -170,12 +184,18 @@ import { ref, onMounted, computed } from "vue";
|
||||
import { useRoundsStore } from "@/stores/rounds";
|
||||
import { useWalletStoreV2 } from "@/stores/walletV2";
|
||||
|
||||
import { getblocky } from "@/helper/helper.js";
|
||||
import { getblocky, getAddressShortName } from "@/helper/helper.js";
|
||||
import StakeComponent from "@/components/StakeComponent.vue";
|
||||
import StakeComponentV1 from "@/components/StakeComponentV1.vue";
|
||||
import ClaimComponent from "@/components/ClaimComponent.vue";
|
||||
|
||||
import { useMemeburnerStore } from "@/stores/memeburner";
|
||||
import { useRewardLockerStore } from "@/stores/rewardlocker";
|
||||
|
||||
const roundsStore = useRoundsStore();
|
||||
|
||||
const walletStore = useWalletStoreV2();
|
||||
const rewardLockerStore = useRewardLockerStore();
|
||||
const memeBurnerStore = useMemeburnerStore();
|
||||
|
||||
const activeRound = ref(null);
|
||||
const openCycleElement = ref(false);
|
||||
@@ -189,13 +209,22 @@ function openRound(index) {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// await memeBurnerStore.init();
|
||||
// await rewardLockerStore.init();
|
||||
|
||||
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;
|
||||
}
|
||||
await roundsStore.loadRewardsRounds();
|
||||
console.log("roundsStore.rounds", roundsStore.rounds);
|
||||
});
|
||||
|
||||
const rounds = computed(() =>
|
||||
roundsStore.rounds
|
||||
const rounds = computed(() => {
|
||||
var tetst = roundsStore.rounds
|
||||
.filter((round) => {
|
||||
if (round.round) {
|
||||
return true;
|
||||
@@ -203,187 +232,206 @@ const rounds = computed(() =>
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.reverse()
|
||||
);
|
||||
.reverse();
|
||||
return tetst;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.profile-header
|
||||
color: #FFF
|
||||
text-align: center
|
||||
font-size: 32px
|
||||
margin-bottom: 12px
|
||||
.profile-subheader
|
||||
.profile-page
|
||||
display: flex
|
||||
justify-content: center
|
||||
gap: 12px
|
||||
align-items: center
|
||||
margin-bottom: 24px
|
||||
.profile-subheader-logo
|
||||
img
|
||||
width: 21px
|
||||
height: 21px
|
||||
border-radius: 20%
|
||||
.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
|
||||
flex-direction: column
|
||||
gap: 24px
|
||||
.profile-header
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
gap: 16px
|
||||
.total-sacrificed-header
|
||||
font-size: 18px
|
||||
.total-sacrificed-coins
|
||||
gap: 8px
|
||||
.profile-headline
|
||||
color: #FFF
|
||||
text-align: center
|
||||
font-size: 32px
|
||||
.profile-subheader
|
||||
display: flex
|
||||
gap: 27px
|
||||
.total-sacrificed-coin
|
||||
justify-content: center
|
||||
gap: 12px
|
||||
align-items: center
|
||||
.profile-subheader-logo
|
||||
img
|
||||
width: 21px
|
||||
height: 21px
|
||||
border-radius: 20%
|
||||
.profile-subheader-address
|
||||
font-size: 12px
|
||||
.total-rewards-wrapper
|
||||
border-radius: 16px
|
||||
background: var(--darkgrey, #202020)
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 24px
|
||||
padding: 8px
|
||||
.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
|
||||
gap: 8px
|
||||
text-align: center
|
||||
.total-sacrificed-coin-logo
|
||||
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
|
||||
height: 49px
|
||||
width: 49px
|
||||
height: 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
|
||||
.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
|
||||
.cycle-round
|
||||
border-radius: 16px
|
||||
border: 3px solid var(--grey, #858585)
|
||||
background: var(--dark-grey, #202020)
|
||||
padding: 12px
|
||||
min-height: 55px
|
||||
.cycle-round-inner
|
||||
align-items: center
|
||||
gap: 16px
|
||||
.total-sacrificed-header
|
||||
font-size: 18px
|
||||
.total-sacrificed-coins
|
||||
display: flex
|
||||
gap: 27px
|
||||
.total-sacrificed-coin
|
||||
display: flex
|
||||
font-size: 18px
|
||||
flex-direction: column
|
||||
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
|
||||
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
|
||||
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
|
||||
// .cycle-round-number
|
||||
.cycle-round-badget
|
||||
border-radius: 14px
|
||||
border: 1px solid var(--grey, #858585)
|
||||
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
|
||||
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
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user