update contracts+ desktop version
This commit is contained in:
EmberSpirit
@@ -1,94 +1,108 @@
|
||||
<template>
|
||||
<div
|
||||
class="connected-stake bloodline-border white card"
|
||||
:class="{ 'card--dense': dense, 'connected-stake--variant1': variant === 1 }"
|
||||
@click="
|
||||
(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
"
|
||||
:class="{
|
||||
'stake-component--variant1': props.variant === 1,
|
||||
'stake-component--variant2': props.variant === 2,
|
||||
'stake-component--variant3': props.variant === 3,
|
||||
}"
|
||||
>
|
||||
<div class="connected-stake-headline mid-mid-text">
|
||||
<div class="mid-text text-center" v-if="props.variant === 2">
|
||||
<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>
|
||||
<div
|
||||
class="connected-stake bloodline-border 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" v-if="variant !== 2">Staked</slot>
|
||||
</div>
|
||||
<div class="connected-stake-subheadline">
|
||||
<slot name="subheadline"
|
||||
>Stake for a 25% bonus on your sacrifice.<br />
|
||||
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 mid-mid-text" disabled v-if="roundStore.currentRound === 1">Stake</div>
|
||||
<div class="btn btn-immortal mid-mid-text" v-else @click="openStake">Stake</div>
|
||||
<div
|
||||
v-if="(walletStore.memeToken?.staked === 0 && !stakeonly) || roundStore.currentRound === 1"
|
||||
class="btn btn-immortal btn--disabled mid-mid-text"
|
||||
>
|
||||
Unstake
|
||||
</div>
|
||||
<div v-else-if="!stakeonly" class="btn btn-immortal mid-mid-text" @click="openUnstake">Unstake</div>
|
||||
</div>
|
||||
<Transition name="smooth">
|
||||
<stake-menu
|
||||
v-model="tokenNumber"
|
||||
@close="stakeMenu = false"
|
||||
:stake="stake"
|
||||
v-if="stakeMenu & !unstakeMenu"
|
||||
>
|
||||
<template v-slot:body>
|
||||
<div
|
||||
class="btn btn-immortal stake-button"
|
||||
@click="rewardLockerStore.stakeBloodline(tokenNumber)"
|
||||
>
|
||||
Stake
|
||||
</div>
|
||||
<div
|
||||
class="btn transparent small-text cancel-button text-center"
|
||||
@click="stakeMenu = false"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
</template>
|
||||
</stake-menu>
|
||||
<div class="unstake-menu" v-else-if="stakeMenu & unstakeMenu">
|
||||
<div class="low-mid-text text-center">
|
||||
To prevent users from farming rewards you can claim your stake next cycle.
|
||||
</div>
|
||||
<div class="unstake-menu-actions">
|
||||
<div class="btn btn-immortal stake-button" v-if="!loading" @click="orderUnstake">
|
||||
Unstake Next Cycle
|
||||
</div>
|
||||
<div class="btn btn--disabled" v-else>Sign Transaction</div>
|
||||
<div
|
||||
class="btn transparent small-text cancel-button text-center"
|
||||
@click="stakeMenu = false"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
<!-- todo v-if activeround -->
|
||||
<div
|
||||
v-if="(walletStore.memeToken?.staked === 0 && !stakeonly) || roundStore.currentRound === 1"
|
||||
class="btn btn-immortal btn--disabled"
|
||||
class="connected-stake-first-round small-text text-center"
|
||||
v-if="roundStore.currentRound === roundStore.activeRound"
|
||||
>
|
||||
Unstake
|
||||
No $BLOOD on the market. Staking is activated after the first cycle is finished.
|
||||
</div>
|
||||
<div v-else-if="!stakeonly" class="btn btn-immortal" @click="openUnstake">Unstake</div>
|
||||
</div>
|
||||
<Transition name="smooth">
|
||||
<stake-menu
|
||||
v-model="tokenNumber"
|
||||
@close="stakeMenu = false"
|
||||
:stake="stake"
|
||||
v-if="stakeMenu & !unstakeMenu"
|
||||
>
|
||||
<template v-slot:body>
|
||||
<div
|
||||
class="btn btn-immortal stake-button"
|
||||
@click="rewardLockerStore.stakeBloodline(tokenNumber)"
|
||||
>
|
||||
Stake
|
||||
</div>
|
||||
<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
|
||||
Cancel
|
||||
</div>
|
||||
</template>
|
||||
</stake-menu>
|
||||
<div class="unstake-menu" v-else-if="stakeMenu & unstakeMenu">
|
||||
<div class="low-mid-text text-center">
|
||||
To prevent users from farming rewards you can claim your stake next cycle.
|
||||
</div>
|
||||
<div class="unstake-menu-actions">
|
||||
<div class="btn btn-immortal stake-button" v-if="!loading" @click="orderUnstake">
|
||||
Unstake Next Cycle
|
||||
</div>
|
||||
<div class="btn btn--disabled" v-else>Sign Transaction</div>
|
||||
<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
|
||||
Cancel
|
||||
</div>
|
||||
</div>
|
||||
<div class="connected-stake-claim-info low-mid-text text-center">
|
||||
You can claim your stake next cycle.
|
||||
</div>
|
||||
</Transition>
|
||||
<!-- todo v-if activeround -->
|
||||
<div
|
||||
class="connected-stake-first-round small-text text-center"
|
||||
v-if="roundStore.currentRound === roundStore.activeRound"
|
||||
>
|
||||
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>
|
||||
</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> -->
|
||||
</slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -149,6 +163,21 @@ async function orderUnstake() {
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
|
||||
.connected-stake-subheadline
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
|
||||
.stake-component--variant2
|
||||
border-radius: 16px
|
||||
background: var(--darkgrey, #202020)
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 24px
|
||||
padding: 8px
|
||||
@media (min-width: 992px)
|
||||
padding: 32px 64px
|
||||
.unstake-menu
|
||||
display: flex
|
||||
flex-direction: column
|
||||
@@ -157,4 +186,25 @@ async function orderUnstake() {
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
|
||||
.stake-component--variant3
|
||||
.connected-stake
|
||||
.connected-stake-headline
|
||||
text-align: left
|
||||
font-size: 18px
|
||||
.connected-stake-subheadline
|
||||
font-size: 16px
|
||||
.connected-stake-body
|
||||
.token-price-wrapper, .stake-reward
|
||||
.token-name
|
||||
font-size: 14px
|
||||
.token-price
|
||||
font-size: 24px
|
||||
.connected-stake-buttons
|
||||
.btn
|
||||
font-size: 18px
|
||||
.connected-stake-first-round
|
||||
font-size: 14px
|
||||
.connected-stake-claim-info
|
||||
font-size: 14px
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user