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/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>