cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update profilepage

Browse Source
This commit is contained in:
EmberSpirit
2023-09-08 23:05:34 +02:00
parent cd773e16c9
commit dfd208e075
26 changed files with 2155 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ClaimComponent.vue
+80
View File
@@ -0,0 +1,80 @@
<template>
<stake-component v-if="walletStore.memeToken?.unclaimedRewards > 0">
<template v-slot:headline> Unclaimed </template>
<template v-slot:body>
<token-name-price
:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
:price="walletStore.memeToken?.unclaimedRewards"
></token-name-price>
<token-logo img="/assets/img/token/bloodline.png" :alt="'todo'"></token-logo>
</template>
<template v-slot:actions>
<Transition name="smooth">
<div class="connected-stake-buttons" v-show="!stakeMenu">
<div class="btn btn-immortal" @click="rewardLockerStore.claimAll">Claim</div>
<div class="btn btn-immortal" @click="openStake">Stake</div>
</div>
</Transition>
<Transition name="smooth">
<stake-menu v-model="tokenNumber" @close="stakeMenu = false" :stake="stake" v-if="stakeMenu">
<template v-slot:body>
<div class="btn btn-immortal stake-button" @click="stakeBloodline">Stake & Claim Rest</div>
<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
Cancel
</div>
</template>
</stake-menu>
</Transition>
<div class="connected-stake-first-round small-text text-center">You can claim, once the cycle is over.</div>
</template>
</stake-component>
<stake-component dense v-else>
<div class="text-center">All Claimed</div>
</stake-component>
</template>
<script setup>
import { ref } from "vue";
import StakeComponent from "@/components/StakeComponent.vue";
import StakeMenu from "@/components/StakeMenu.vue";
import TokenNamePrice from "@/components/TokenNamePrice.vue";
import TokenLogo from "@/components/TokenLogo.vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import { useRewardLockerStore } from "@/stores/rewardlocker";
const rewardLockerStore = useRewardLockerStore();
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const props = defineProps({
stakeonly: {
type: Boolean,
required: false,
default: false,
},
});
const stakeMenu = ref(false);
const stake = ref(null);
const tokenNumber = ref(null);
function openStake() {
stake.value = true;
stakeMenu.value = true;
}
function openUnstake() {
stake.value = false;
stakeMenu.value = true;
}
</script>
<style lang="sass">
// .smooth-enter-active, .smooth-leave-active
// transition: opacity 0.1s
// .smooth-enter, .smooth-leave-to
// height: 0
</style>
src/components/ConnectWallet.vue
+37 -22
View File
@@ -38,14 +38,37 @@
:price="token.balanceOf"
></token-name-price>
<div class="connected-token-button">
<div class="bloodline-badge grey">
<div class="bloodline-badge-text">Sacrifice</div>
<div class="bloodline-badge grey" @click="badgeClick(token)">
<div
class="bloodline-badge-text"
v-if="tokenStore.memeToken.contractAddress === token.contractAddress"
>
Buy
</div>
<div v-else class="bloodline-badge-text">Sacrifice</div>
</div>
</div>
<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
</div>
</div>
<stake-component></stake-component>
<!-- <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>
<template v-slot:actions>
<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>
</template>
</stake-component> -->
</div>
</template>
@@ -59,9 +82,12 @@ import TokenLogo from "./TokenLogo.vue";
import StakeComponent from "./StakeComponent.vue";
import TokenInput from "./TokenInput.vue";
import { getAddressShortName, getblocky } from "@/helper/helper.js";
import { useRoute, useRouter } from "vue-router";
import { disconnect } from "@wagmi/core";
const router = useRouter();
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
@@ -85,6 +111,14 @@ async function disconnectWallet() {
}
}
function badgeClick(token) {
var tokenData = tokenStore.getToken(token.contractAddress);
tokenStore.activeToken = tokenData;
// router.push({ name: "home", hash: `#${tokenData.name}` });
router.push({ name: "home" });
instance.parent.emit("update:modelValue", false);
}
async function connectWallet(connector) {
instance.parent.emit("update:modelValue", false);
await walletStore.connectWallet(toRaw(connector));
@@ -149,23 +183,4 @@ async function connectWallet(connector) {
padding: 4px 16px
color: black
font-size: 14px
.connected-stake
.connected-stake-headline
margin-bottom: 8px
.connected-stake-subheadline
margin-bottom: 16px
.connected-stake-body
display: flex
gap: 16px
margin-bottom: 16px
.stake-reward
margin-left: auto
.connected-stake-buttons
display: flex
text-align: center
gap: 16px
div
flex: 1 1 50%
font-size: 18px
</style>
src/components/SacrificeToken.vue
+62 -25
View File
@@ -1,7 +1,6 @@
<template>
<div class="sacrifice-wrapper card bloodline-wrapper">
{{ activeToken.allowance }}
<!-- {{ activeToken.allowance }} -->
<div class="sacrifice-inner">
<div class="sacrifice-headline">Select Sacrifice</div>
<div class="sacrifice-select-tokens">
@@ -72,6 +71,28 @@
<img :src="activeToken.vamp.logo" :alt="activeToken.vamp.name" />
</div>
</div>
<div class="sacrifice-staking-bonus">
<div
class="sacrifice-staking-bonus-inner"
@click="
(e) => {
showStakingMenu = !showStakingMenu;
}
"
>
<div class="mid-mid-text">No Staking Bonus</div>
<div class="icon">
<font-awesome-icon icon="chevron-down" />
</div>
</div>
<stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component>
</div>
</div>
<div class="sacrificed-info">
<div class="left low-mid-text">You can claim your $BLOOD when the cycle is finished.</div>
<div class="right">
<img src="/assets/img/moon.png" alt="moon" />
</div>
</div>
<div class="sacrifice-fees-info-wrapper">
<div class="sacrifice-fees-img">
@@ -79,10 +100,10 @@
</div>
<div class="sacrifice-fees-body">
<div class="sacrifice-fees-body-header">
<div class="sacrifice-fees-body-header-title">Gas Support</div>
<div class="sacrifice-fees-body-header-amount">42Gwei</div>
<div class="sacrifice-fees-body-header-title">Gas Subsidy</div>
<div class="sacrifice-fees-body-header-amount">≤30 Gwei</div>
</div>
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
<div class="sacrifice-fees-body-subheader">The clan pays your transaction.</div>
</div>
</div>
<div class="sacrifice-buttons-function-wrapper">
@@ -119,6 +140,7 @@ import { ref, defineProps, watch, inject, computed } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import { useMemeburnerStore } from "@/stores/memeburner";
import StakeComponent from "./StakeComponent.vue";
import { storeToRefs } from "pinia";
import Helper from "@/utils/helper.js";
const isMobile = inject("isMobile");
@@ -146,37 +168,29 @@ watch(
const tokenNumber = ref(0);
const output = ref(0);
const showStakingMenu = ref(false);
const approvalData = ref(null);
const processChange = Helper.debounce((e) => getRewardsFor(e));
const processChange = Helper.debounce((e) => getRewardsFor(e.target.value));
async function getRewardsFor(e) {
if (!e.target.value || isNaN(e.target.value)) {
async function getRewardsFor(value) {
if (!value || isNaN(value)) {
output.value = 0;
return;
}
console.log("activeToken.value.decimals", activeToken.value.decimals);
const rewardsForResult = await memeburnerStore.getRewardFor(
BigInt(e.target.value * Math.pow(10, activeToken.value.decimals))
BigInt(value * Math.pow(10, activeToken.value.decimals))
);
// var test = await memeburnerStore.getRewardsFor(10000);
// console.log("test", test);
// const rewardsForResult = await tokenStore.getRewardsFor(10000);
console.log("rewardsForResult", rewardsForResult);
console.log("tokenStore.memeToken.decimals", tokenStore.memeToken.decimals);
console.log(
"Math.pow(10, tokenStore.memeToken.decimals)",
Math.pow(10, tokenStore.memeToken.decimals)
);
output.value =
rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
output.value = rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
return output.value;
}
async function addTokens(value) {
tokenNumber.value = tokenNumber.value + value;
output.value = await memeburnerStore.getRewardsFor(
parseInt(tokenNumber.value)
);
tokenNumber.value = Number(tokenNumber.value) + Number(value);
output.value = await getRewardsFor(parseInt(tokenNumber.value));
}
</script>
@@ -188,7 +202,7 @@ async function addTokens(value) {
margin-right: auto
background-color: var(--primary)
.sacrifice-inner
padding: 48px 24px
padding: 24px
@media (min-width: 992px)
padding: 48px 64px
.sacrifice-headline
@@ -232,7 +246,6 @@ async function addTokens(value) {
.sacrifice-buttons-function-wrapper
text-align: center
justify-content: center
margin-top: 24px
display: block
@media (min-width: 992px)
display: flex
@@ -244,7 +257,6 @@ async function addTokens(value) {
color: var(--grey)
border-radius: 16px
padding: 16px 24px
margin-top: 24px
font-size: 16px
.sacrifice-fees-img
flex: 0 0 15%
@@ -260,6 +272,9 @@ async function addTokens(value) {
margin-bottom: 0
.sacrifice-from-to-wrapper
display: flex
flex-direction: column
gap: 16px
.sacrifice-from-wrapper,.sacrifice-to-wrapper
.sarcrifice-from-input
display: flex
@@ -316,4 +331,26 @@ async function addTokens(value) {
// color: darken(red, 10%)
// transform: scale(1.1)
// transition: transform 0s
.sacrificed-info
display: flex
padding: 8px 24px
justify-content: space-between
align-items: center
align-self: stretch
border-radius: 16px
background: var(--midnight-black, #0F0F0F)
text-align: left
.sacrifice-staking-bonus
display: flex
flex-direction: column
padding: 4px 8px
row-gap: 8px
border-radius: 10px
background: var(--midnight-black, #0F0F0F)
.sacrifice-staking-bonus-inner
display: flex
justify-content: space-between
.icon
margin-left: auto
</style>
src/components/StakeComponent.vue
+75 -21
View File
@@ -1,22 +1,34 @@
<!-- zukünftig card component -->
<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
class="connected-stake bloodline-border white card"
:class="{ 'card--dense': dense }"
@click="
(e) => {
e.preventDefault();
e.stopPropagation();
}
"
>
<div class="connected-stake-headline mid-mid-text" v-if="slots.headline">
<slot name="headline"></slot>
</div>
<div class="connected-stake-buttons" v-if="!stakeMenu">
<div class="connected-stake-subheadline" v-if="slots.subheadline">
<slot name="subheadline"></slot>
</div>
<div class="connected-stake-body" v-if="slots.body">
<slot name="body"></slot>
</div>
<slot name="actions"></slot>
<slot></slot>
<!-- <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 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> -->
</div>
</template>
@@ -25,12 +37,23 @@ 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";
import { useSlots } from "vue";
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const slots = useSlots();
const props = defineProps({
stakeonly: {
type: Boolean,
required: false,
default: false,
},
dense: {
type: Boolean,
required: false,
default: false,
},
});
const stakeMenu = ref(false);
const stake = ref(null);
@@ -46,4 +69,35 @@ function openUnstake() {
}
</script>
<style lang="sass"></style>
<style lang="sass">
.card
padding: 16px 12px
.card--dense
padding: 8px
.connected-stake
background-color: var(--darkgrey)
display: flex
flex-direction: column
gap: 16px
&.variant1
background-color: transparent
border: none
padding: 16px 6px
.connected-stake-headline
text-align: center
.connected-stake-subheadline
text-align: center
.connected-stake-body
display: flex
text-align: left
gap: 16px
.token-logo
margin-left: auto
.connected-stake-buttons
display: flex
text-align: center
gap: 16px
div
flex: 1 1 50%
font-size: 18px
</style>
src/components/StakeComponentV1.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<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>
<template v-slot: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>
</template>
<template v-slot:actions>
<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>
<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 class="connected-stake-first-round small-text text-center">
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>
</template>
</stake-component>
</template>
<script setup>
import { ref } from "vue";
import StakeComponent from "@/components/StakeComponent.vue";
import StakeMenu from "@/components/StakeMenu.vue";
import TokenNamePrice from "@/components/TokenNamePrice.vue";
import TokenLogo from "@/components/TokenLogo.vue";
import { useRewardLockerStore } from "@/stores/rewardlocker";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const rewardLockerStore = useRewardLockerStore();
const props = defineProps({
stakeonly: {
type: Boolean,
required: false,
default: false,
},
});
const stakeMenu = ref(false);
const unstakeMenu = ref(false);
const stake = ref(null);
const tokenNumber = ref(null);
const loading = ref(false);
function openStake() {
stake.value = true;
unstakeMenu.value = false;
stakeMenu.value = true;
}
function openUnstake() {
stake.value = false;
unstakeMenu.value = true;
stakeMenu.value = true;
}
async function orderUnstake() {
loading.value = true;
var result = await rewardLockerStore.orderUnstake();
console.log("orderUnstake", result);
loading.value = false;
}
</script>
<style lang="sass">
.unstake-menu
display: flex
flex-direction: column
gap: 16px
.unstake-menu-actions
display: flex
flex-direction: column
gap: 8px
</style>
src/components/StakeMenu.vue
+53 -14
View File
@@ -1,17 +1,37 @@
<template>
<div>
<token-input v-model="tokenNumber">
<div class="stake-menu">
<div class="token-input">
<div class="sarcrifice-from-input">
<input
@input="emit('update:modelValue', Number($event.target.value))"
:value="props.modelValue"
:placeholder="0"
/>
</div>
<div class="value-adder">
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(25)">25%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50)">50%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75)">75%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(100)">100%</div>
</div>
</div>
<!-- <token-input v-model="tokenNumber">
<template v-slot:message>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(25)">25%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50)">50%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75)">75%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(100)">100%</div>
</template>
</token-input>
<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
<div class="btn btn-immortal stake-button" @click="stakeBloodline" v-if="props.stake">Stake</div>
<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake</div>
<div class="btn btn-immortal black cancel-button" @click="emit('close')">Cancel</div>
</token-input> -->
<div class="stake-menu-actions">
<slot name="body">
<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
<div class="btn btn-immortal stake-button" @click="stakeBloodline" v-if="props.stake">Stake</div>
<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake for Next Cycle</div>
<div class="btn btn-immortal black cancel-button" @click="emit('close')">Cancel</div>
</slot>
</div>
</div>
</template>
@@ -32,11 +52,11 @@ const tokenStore = useTokenStore();
const props = defineProps({
stake: Boolean,
modelValue: Number,
});
const emit = defineEmits(["close"]);
const emit = defineEmits(["close", "update:modelValue"]);
const tokenNumber = ref(null);
async function addTokensPercent(value) {
let amount;
if (props.stake) {
@@ -44,11 +64,24 @@ async function addTokensPercent(value) {
} else {
amount = (walletStore.memeToken.staked * value) / 100;
}
tokenNumber.value = amount;
emit("update:modelValue", Number(amount));
}
async function unstakeBloodline() {
alert("todo");
const fromAddress = walletStore.address;
var test1 = await rewardLockerStore.contract.read.unstakeOrdered([4, fromAddress]);
console.log("test1", test1);
var test = true;
if (test) {
return;
}
var hash = await rewardLockerStore.contract.write.orderUnstake();
console.log("hash", hash);
const data = await waitForTransaction({
hash: hash,
});
console.log("data", data);
}
async function stakeBloodline() {
@@ -79,13 +112,19 @@ async function stakeBloodline() {
<style lang="sass">
.btn
&.btn-immortal
&.cancel-button
font-size: 14px
text-align: center
&.stake-button
font-size: 18px
text-align: center
.input-balance
margin: 8px 0
color: var(--grey, #858585)
.stake-menu
display: flex
flex-direction: column
gap: 32px
.stake-menu-actions
display: flex
flex-direction: column
gap: 8px
</style>
src/components/TokenClaim.vue
+5 -8
View File
@@ -20,13 +20,13 @@
</div>
<div class="rewards-list" v-else>
<rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
<rewards-wrapper
<!-- <rewards-wrapper
title="Staking Bonus"
coin="$BLOOD"
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" />
</div>
<div class="rewards-total-wrapper">
@@ -41,15 +41,12 @@
</div>
<div class="claim-button">
<div v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div>
<div v-else-if="getCurrentRoundData?.rewards_total > 0" class="btn btn-immortal" @click="claimRewards">
Claim
<div class="stake-buttons" v-else-if="getCurrentRoundData?.rewards_total > 0">
<div class="btn btn-immortal" @click="claimRewards">Claim</div>
<div class="btn btn-immortal">Stake</div>
</div>
<div v-else class="btn btn-immortal btn--disabled">Nothing to claim</div>
</div>
<div class="stake-buttons">
<div class="btn btn-immortal">Stake</div>
<div class="btn btn-immortal">Unstake</div>
</div>
</div>
</template>
src/components/TokenInput.vue
-1
View File
@@ -6,7 +6,6 @@
v-model="props.modelValue"
:placeholder="0"
/>
<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
</div>
<div class="value-adder">
<slot class="value-adder" name="message"></slot>
src/components/TokenNamePrice.vue
+2 -6
View File
@@ -1,7 +1,7 @@
<template>
<div class="token-price-wrapper">
<div class="token-name">{{ props.name }}</div>
<div class="token-price">{{ props.price }}</div>
<div class="token-name small-text">{{ props.name }}</div>
<div class="token-price number-mobile">{{ props.price }}</div>
</div>
</template>
@@ -15,9 +15,5 @@ const props = defineProps({
<style lang="sass">
.token-price-wrapper
.token-name
font-size: 14px
margin-bottom: 4px
.token-price
font-size: 24px
letter-spacing: 4.32px
</style>