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

update m issues + e issues

Browse Source
This commit is contained in:
EmberSpirit
2023-10-19 20:30:27 +02:00
parent cfaf527b95
commit 167ad941bc
18 changed files with 293 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/img/winnerCrown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

src/App.vue
+5 -5
View File
@@ -261,9 +261,9 @@ body:hover::-webkit-scrollbar-thumb
.toast-header, .toast-body
font-size: 16px
// .Vue-Toastification__container
// &.bloodline-toast-container
// &.top-right
// @media (min-width: 992px)
// top: 100px
.Vue-Toastification__container
&.bloodline-toast-container
&.top-right
@media (min-width: 992px)
top: 100px
</style>
src/components/BloodChart.vue
+16 -5
View File
@@ -21,7 +21,8 @@
<div class="blood-chart-element-header">
<div class="blood-chart-coin">
<template v-if="cycleStore.getCycleWinner.contractAddress === coin.contractAddress">
<img :src="coin.vampwinner2" alt="logo" />
<img class="logo" :src="coin.vamplogo" alt="logo" />
<img class="crown" src="/assets/img/winnerCrown.png" alt="" />
</template>
<template v-else>
<img :src="coin.vamplogo" alt="logo" />
@@ -95,7 +96,7 @@
<script setup>
import { computed, ref, inject, onMounted } from "vue";
import { getPercentage, compactNumber, formatNumber } from "@/helper/helper.js";
import { getPercentage, formatNumber } from "@/helper/helper.js";
import { useCycleStore } from "@/stores/cycles";
import { useMemeburnerStore } from "@/stores/memeburner";
@@ -146,11 +147,14 @@ function getPercentageBloodChart(amount, goal) {
justify-content: center
// margin-bottom: 80px
position: relative
margin-top: 24px
.blood-chart
height: 560px
width: 100%
justify-content: space-around
display: inline-flex
overflow: unset
overflow-x: hidden
@media (min-width: 992px)
gap: 32px
width: unset
@@ -172,15 +176,22 @@ function getPercentageBloodChart(amount, goal) {
margin-right: auto
position: relative
margin-bottom: 16px
overflow: hidden
// overflow: hidden
height: 80px
width: 80px
@media (min-width: 992px)
height: 72px
width: 72px
img
height: 100%
width: 100%
&.logo
height: 100%
width: 100%
img
&.crown
position: absolute
top: -10px
transform: translate(-50%, -50%)
left: 50%
.blood-chart-coin-title
text-align: center
margin-bottom: 32px
src/components/CardComponent.vue
-1
View File
@@ -69,7 +69,6 @@ const props = defineProps({
display: flex
text-align: left
gap: 16px
height: 56px
.token-logo
margin-left: auto
.connected-stake-buttons
src/components/ClaimComponent.vue
+10
View File
@@ -66,6 +66,13 @@
You can claim, once the cycle is over.
</div>
</template>
<template v-else-if="cycleStore.rewardsSacrificeCurrentCycle > 0n">
<div class="connected-stake-buttons">
<div class="btn btn-immortal mid-mid-text btn--disabled">Claim</div>
<div class="btn btn-immortal mid-mid-text btn--disabled">stake</div>
</div>
<div class="text-center">You can claim, once the cycle is over</div>
</template>
<template v-else>
<div class="btn btn-immortal mid-mid-text text-center" @click="router.push({ name: 'home' })">
Go to Sacrifice
@@ -86,6 +93,7 @@ import { waitForTransaction } from "@wagmi/core";
import LoadingComponent from "@/components/LoadingComponent.vue";
import StakeSuccessToast from "@/components/toasts/StakeSuccessToast.vue";
import { useCycleStore } from "@/stores/cycles";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import { useRewardLockerStore } from "@/stores/rewardlocker";
@@ -98,6 +106,8 @@ const toast = useToast();
const rewardLockerStore = useRewardLockerStore();
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const cycleStore = useCycleStore();
const router = useRouter();
const props = defineProps({
src/components/ConnectWallet.vue
-1
View File
@@ -209,7 +209,6 @@ async function connectWallet(connector) {
display: flex
gap: 16px
align-items: center
height: 56px
.connected-token-button
margin-left: auto
.bloodline-badge
src/components/SacrificeToken.vue
-1
View File
@@ -512,7 +512,6 @@ async function changeActiveToken(token) {
.sacrifice-to-body
display: flex
justify-content: space-between
height: 56px
.sacrificed-info
display: flex
padding: 8px 24px
src/components/StakeComponentV1.vue
+46 -54
View File
@@ -32,44 +32,50 @@
<slot name="body">
<token-name-price name="$BLOOD staked" :price="formatNumber(walletStore.staked)"></token-name-price>
<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline-token'"></token-logo>
<token-name-price class="stake-reward" name="Bonus" price="+25%"></token-name-price>
<token-name-price :variant="true" class="stake-reward" name="Bonus" price="+25%"></token-name-price>
</slot>
</div>
<slot name="actions">
<div class="connected-stake-buttons" v-if="!stakeMenu">
<div class="mid-mid-text text-center" disabled v-if="!walletStore.connected">
Please Connect Your Wallet
</div>
<div
class="btn btn-immortal mid-mid-text"
disabled
v-if="walletStore.connected && cycleStore.currentCycle === 1"
>
Stake
</div>
<div
class="btn btn-immortal mid-mid-text"
v-else-if="walletStore.connected && cycleStore.currentCycle > 1"
@click="openStake"
>
Stake
</div>
<div
v-if="
walletStore.connected &&
((walletStore.memeToken?.staked === 0 && !stakeonly) || cycleStore.currentCycle === 1)
"
class="btn btn-immortal btn--disabled mid-mid-text"
>
Unstake
</div>
<div
v-else-if="walletStore.connected && !stakeonly"
class="btn btn-immortal mid-mid-text"
@click="openUnstake"
>
Unstake
</div>
<template v-if="!walletStore.connected">
<div class="mid-mid-text text-center" disabled>Please Connect Your Wallet</div>
</template>
<template v-else-if="walletStore.connected && !ableToUnstake">
<div class="btn btn-immortal mid-mid-text" disabled v-if="cycleStore.currentCycle === 1">
Stake
</div>
<div
class="btn btn-immortal mid-mid-text"
v-else-if="cycleStore.currentCycle > 1"
@click="openStake"
>
Stake
</div>
<div
v-if="(walletStore.memeToken?.staked === 0 && !stakeonly) || cycleStore.currentCycle === 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>
</template>
<template v-else-if="walletStore.connected && ableToUnstake">
<div
class="btn btn-immortal mid-mid-text text-center"
v-if="unstakeState === 0 && walletStore.orderedUnstakedAmount > 0n && ableToUnstake"
@click="unstake"
>
Claim Unstaked $BLOOD
</div>
<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 1">
Sign Transaction
</div>
<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 2">
<loading-component></loading-component>
</div>
</template>
</div>
<Transition name="smooth">
<stake-menu
@@ -132,25 +138,10 @@
</div>
<div
class="connected-stake-first-round small-text text-center"
v-if="walletStore.orderedUnstakedAmount > 0"
v-if="walletStore.orderedUnstakedAmount > 0n && !ableToUnstake"
>
You can claim {{ formatNumber(walletStore.orderedUnstakedAmount) }} $BLOOD next cycle.
</div>
<div>
<div
class="btn btn-immortal mid-mid-text text-center"
v-if="unstakeState === 0 && walletStore.orderedUnstakedAmount > 0n && ableToUnstake"
@click="unstake"
>
Claim Unstaked $BLOOD
</div>
<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 1">
Sign Transaction
</div>
<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 2">
<loading-component></loading-component>
</div>
</div>
</slot>
<slot></slot>
</div>
@@ -302,14 +293,14 @@ async function stakeToken() {
const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
console.log("data", data);
state.value = 0;
await walletStore.loadWalletData();
showSuccessToast(
formatNumber(outputClaim),
"Success!",
"You just staked",
"Your next sacrifice will get an extra staking bonus as a reward."
);
//reload data
await walletStore.loadWalletData();
stakeMenu.value = false;
} catch (error) {
console.error(error);
throw new Error(error);
@@ -319,8 +310,9 @@ async function stakeToken() {
}
const ableToUnstake = computed(() => {
var cycleList = walletStore.memeToken.orderedUnstakedCycles.findIndex((obj) => obj.result > 0n);
if (cycleList && cycleList + 1 <= cycleStore.currentCycle) {
var cycleList = walletStore.memeToken?.orderedUnstakedCycles?.findIndex((obj) => obj.result > 0n);
console.log("cycleList", cycleList);
if (cycleList && cycleList > -1 && cycleList + 1 <= cycleStore.currentCycle) {
return true;
}
return false;
src/components/StakeMenu.vue
+7 -1
View File
@@ -14,7 +14,13 @@
<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="rewardLockerStore.stakeBloodline(tokenNumber)"
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" @click="emit('close')">Cancel</div>
</slot>
src/components/TokenClaim.vue
+15 -2
View File
@@ -54,7 +54,18 @@
<button class="btn btn-immortal sub-header" @click="showPanel = true">Connect</button>
</template>
<template v-else-if="activeCycle === currentCycle">
<button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">Sacrifice</button>
<template v-if="rewardsSacrifice > 0n">
<div class="stake-buttons">
<button class="btn btn-immortal sub-header btn--disabled">Claim</button>
<button class="btn btn-immortal sub-header btn--disabled">Stake</button>
</div>
<div>You can claim once the current cycle is finished and the clan bonus calculated</div>
</template>
<template v-else>
<button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">
Sacrifice
</button>
</template>
</template>
<template v-else-if="rewardsTotal > 0">
<Transition name="smooth">
@@ -285,6 +296,9 @@ const stateStakeClaimComp = computed(() => {
text-align: left
.claim-button
text-align: center
display: flex
flex-direction: column
gap: 24px
.stake-buttons
display: flex
text-align: center
@@ -308,7 +322,6 @@ const stateStakeClaimComp = computed(() => {
justify-content: space-between
text-align: left
box-sizing: content-box
height: 56px
.rewards-left
display: flex
flex-direction: column
src/components/TokenNamePrice.vue
+8 -1
View File
@@ -1,7 +1,9 @@
<template>
<div class="token-price-wrapper">
<div class="token-name mid-text">{{ props.name }}</div>
<div class="token-price sub-header">{{ props.price }}</div>
<div class="token-price" :class="{ 'sub-header-2': !props.variant, 'sub-header': props.variant }">
{{ props.price }}
</div>
</div>
</template>
@@ -9,6 +11,11 @@
const props = defineProps({
name: String,
price: [Number, String],
variant: {
type: Boolean,
required: false,
default: false,
},
});
</script>
src/components/toasts/StakeSuccessToast.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</div>
<div class="amount-number">
<div class="token-amount number-mobile">{{ props.value }}</div>
<div class="token-name">$Blood</div>
<div class="token-name">$BLOOD</div>
</div>
<div class="info toast-body">
{{ props.info }}
src/components/toasts/SwitchNetworkToast.vue
+86
View File
@@ -0,0 +1,86 @@
<template>
<div class="network-switch-card">
<div>Please switch Network to</div>
<div>
<b>{{ props.network.chains[0].name }}</b>
</div>
</div>
</template>
<script setup>
import LoadingComponent from "@/components/LoadingComponent.vue";
import { getCurrentInstance, computed, watch, inject } from "vue";
import { useTokenStore } from "@/stores/tokens";
import { useSacrificeStore } from "@/stores/sacrifice";
import CardComponent from "@/components/CardComponent.vue";
import { useToast } from "vue-toastification";
const emit = defineEmits(["sacrificed"]);
const props = defineProps({
network: Object,
});
const toast = useToast();
const tokenStore = useTokenStore();
const sacrificeStore = useSacrificeStore();
const instance = getCurrentInstance();
const id = instance.attrs["toast-id"];
const splashBlood = inject("splashBlood");
function closeToast() {
toast.dismiss(id);
}
const stateComputed = computed(() => {
let returnState = 0;
if (
sacrificeStore.sacrificeNumber === null ||
sacrificeStore.sacrificeNumber === "" ||
sacrificeStore.sacrificeNumber === 0
) {
returnState = 0;
} else if (sacrificeStore.sacrificeState === 2) {
returnState = 2;
} else if (sacrificeStore.sacrificeState === 3) {
returnState = 3;
} else if (
sacrificeStore.sacrificeNumber !== null ||
sacrificeStore.sacrificeNumber !== "" ||
sacrificeStore.sacrificeNumber > 0
) {
returnState = 1;
}
return returnState;
});
async function sacrificeClick() {
try {
var result = await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, tokenStore.activeToken);
if (result) {
emit("sacrificed");
}
} catch (error) {
console.error("error", error);
} finally {
closeToast();
}
}
</script>
<style lang="sass">
.Vue-Toastification__container
.Vue-Toastification__toast--default
&.approve-toast
background: transparent
&.toast-card
padding: 24px 16px
border-radius: 10px
border: 2px solid var(--dark-purple, #4B0082)
background: var(--midnight-black, #0F0F0F)
.Vue-Toastification__toast-component-body
.network-switch-card
display: flex
flex-direction: column
display: flex
</style>
src/helper/helper.js
+8 -19
View File
@@ -1,21 +1,17 @@
export function getImageUrl(url) {
return new URL(url, import.meta.url).href;
}
export function getPercentage(amount, goal) {
return ((Number(amount) / Number(goal)) * 100).toFixed(2);
}
export function compactNumber(number) {
return Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 2,
}).format(parseInt(number));
// input type bigint
export function formatBigIntDivision(nominator, denominator) {
const integer = (nominator / denominator).toString();
// pick how much digits after point to show
const fraction = (nominator % denominator).toString().substring(0,10);
// output type string
return integer + '.' + fraction;
}
export function formatNumber(number) {
const options = {
style: "decimal",
@@ -37,13 +33,6 @@ export function getAddressShortName(address) {
}
export function numberWithCommas(x, ) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
return x;
}
export function getblocky(address) {
var blockiesData = blockies
.create({
@@ -74,4 +63,4 @@ export function createDebounce() {
fnc();
}, delayMs || 500);
};
}
}
src/main.js
+47 -3
View File
@@ -45,6 +45,8 @@ import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-i
import Toast from "vue-toastification";
// Import the CSS or use your own!
import "vue-toastification/dist/index.css";
import SwitchNetworkToast from "@/components/toasts/SwitchNetworkToast.vue";
import { useToast } from "vue-toastification";
/* add icons to the library */
library.add(
@@ -95,6 +97,35 @@ app.use(Toast, {
});
function showSwitchNetworkToast(network) {
const toast = useToast();
// Define the content object with the component, props and listeners
const content = {
component: SwitchNetworkToast,
// Any prop can be passed, but don't expect them to be reactive
props: {
network
},
// Listen and react to events using callbacks. In this case we listen for
// the "click" event emitted when clicking the toast button
listeners: {},
};
// Render the toast and its contents
return toast(content, {
position: "top-right",
icon: false,
closeOnClick: false,
// toastClassName: "modal-overlay",
hideProgressBar: true,
timeout: false,
toastClassName: "approve-toast toast-card",
});
}
try {
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
@@ -107,7 +138,8 @@ try {
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
console.log("hier chains");
const { chains, publicClient, webSocketPublicClient } = configureChains(
[goerli, mainnet],
// [goerli, mainnet],
[goerli],
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
);
@@ -203,11 +235,23 @@ try {
}
});
watchNetwork((network) => {
watchNetwork((network) => {
const chainAllowed = network.chains?.find((obj) => {
return obj.network === network.chain.network;
});
if (!chainAllowed) {
console.log("chain not allowed", network.chain);
showSwitchNetworkToast(network);
return
} else {
console.log("chain allowed", network.chain);
}
if (network.chain) {
walletStore.chain = network.chain;
}
});
});
await walletStore.init();
src/stores/cycles.js
+20 -9
View File
@@ -37,6 +37,13 @@ export const useCycleStore = defineStore("cycles", {
}
return this.cycles[this.activeCycle]?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals;
},
rewardsSacrificeCurrentCycle() {
const tokenStore = useTokenStore();
if (!this.cycles[this.currentCycle]?.rewards_sacrifice) {
return 0n;
}
return this.cycles[this.currentCycle]?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals;
},
rewardsStaking() {
const tokenStore = useTokenStore();
if (!this.cycles[this.activeCycle]?.rewards_staking) {
@@ -90,15 +97,18 @@ export const useCycleStore = defineStore("cycles", {
//todo check if needed, or use fillcycle
async updateCurrentCycle(sacrificedToken) {
console.log("updateCurrentCycle");
const memeBurnerStore = useMemeburnerStore();
var data = await memeBurnerStore.getSacrificedCycle(this.currentCycle);
const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore();
var data = await memeBurnerStore.getSacrificedCycle(this.currentCycle);
var tokenTotalSacrificed = await rewardLockerStore.getTotalSacrificeRewardsForAllToken(this.currentCycle);
console.log("this.currentCycle", this.currentCycle);
console.log("this.cycles", this.cycles);
if (this.cycles[this.currentCycle]) {
var tokenIndex = this.cycles[this.currentCycle].token.findIndex(
(tokenData) => tokenData.contractAddress === sacrificedToken
);
this.cycles[this.currentCycle].token[tokenIndex].amount = data[tokenIndex].result[1];
this.cycles[this.currentCycle].token[tokenIndex].amount = data[tokenIndex].result[1];
this.cycles[this.currentCycle].token[tokenIndex].amountInBLD = tokenTotalSacrificed[tokenIndex].result;
}
},
/**
@@ -158,7 +168,7 @@ export const useCycleStore = defineStore("cycles", {
const sacrificeClanReward = rewardData[index].result[1];
let clanwin = 0n;
if (cycleNumber !== this.currentCycle) {
clanwin = (coefficent / 10000n - 1n) * sacrificeClanReward;
clanwin = (sacrificeClanReward * coefficent) / 10000n - sacrificeClanReward;
console.log("clanwin", clanwin);
}
const sacrificeRewards = sacrificeClanReward;
@@ -184,9 +194,9 @@ export const useCycleStore = defineStore("cycles", {
const winner = tokenArray.find((token) => token.amount === goalDecimal);
const goalInBLD = await memeBurnerStore.getGoalInBLOOD(cycleNumber);
//replace vamplogo cause it will automatically change the token for the cycle view (new design)
if (winner) {
winner.vamplogo = winner.vampwinner;
}
// if (winner) {
// winner.vamplogo = winner.vampwinner;
// }
this.cycles[cycleNumber] = {
goal: goal[0],
goalInBLD: goalInBLD,
@@ -208,9 +218,10 @@ export const useCycleStore = defineStore("cycles", {
const array = [];
const rewardLockerStore = useRewardLockerStore();
const lastCompletedCycle = await rewardLockerStore.lastCompletedCycle();
for (let index = 0; index <= Number(lastCompletedCycle); index++) {
for (let index = 1; index <= Number(lastCompletedCycle); index++) {
array.push(index);
}
}
console.log("array123", array);
return array;
},
},
src/stores/rewardlocker.js
+2 -2
View File
@@ -32,7 +32,7 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
*/
async getRewards(walletAddress, cycleNumber, tokenAddress) {
try {
return await this.contract.read.rewards([walletAddress, cycleNumber, tokenAddress]);
return await this.contract.read.getRewards([walletAddress, cycleNumber, tokenAddress]);
} catch (error) {
console.error("getRewards", error);
}
@@ -136,7 +136,7 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
const fromAddress = walletStore.address;
const spender = this.config.contractAddress;
const deadline = Date.now() + 20 * 60;
const deadline = BigInt(Date.now()) / 1000n + 1200n;
const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
const value = BigInt(tokenNumber) * 10n ** decimals;
const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
src/views/CycleView.vue
+22 -10
View File
@@ -47,7 +47,8 @@
</div>
<div class="cycle-winner-right">
<div class="cycle-winner-logo">
<img :src="cycleStore.getCycleWinner.vampwinner" alt="" />
<img class="logo" :src="cycleStore.getCycleWinner.vamplogo" alt="" />
<img class="crown" src="/assets/img/winnerCrown.png" alt="" />
</div>
<div class="cycle-winner-name">{{ cycleStore.getCycleWinner.name }}</div>
</div>
@@ -278,17 +279,28 @@ function timeBetweenDates(expirationTimestamp) {
justify-content: space-between
align-items: center
.cycle-winner-logo
height: 48px
width: 48px
height: 72px
width: 72px
position: relative
img
height: 72px
width: 72px
border-radius: 50%
position: absolute
left: 50%
top: 10px
transform: translate(-50%, -50%)
&.logo
height: 100%
width: 100%
border: 1px solid yellow
border-radius: 50%
img
&.crown
position: absolute
top: -10px
transform: translate(-50%, -50%)
left: 50%
// height: 72px
// width: 72px
// border-radius: 50%
// position: absolute
// left: 50%
// top: 10px
// transform: translate(-50%, -50%)
&.inactive
img
height: 100%