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

update visual fixes

Browse Source
This commit is contained in:
EmberSpirit
2023-10-18 23:26:29 +02:00
parent 32ababbb39
commit f45128ceb9
14 changed files with 2349 additions and 2246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+6 -6
View File
@@ -228,7 +228,7 @@ onMounted(async () => {
z-index: 100
gap: 16px
@media (min-width: 992px)
top: 142px
top: 10%
right: 24px
left: unset
transform: unset
@@ -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/assets/sass/buttons.sass
+1
View File
@@ -20,5 +20,6 @@
&[disabled], &.btn--disabled
background-color: darken($purple, 10%)
cursor: not-allowed
color: var(--white-dark)
&:hover,&:focus,&:active
background-color: darken($purple, 10%),
src/assets/sass/variables.sass
+11 -1
View File
@@ -9,6 +9,7 @@ $tertiary-dark: darken($tertiary, 20%)
$tertiary-light: lighten($tertiary, 20%)
$white: #F9F9FA
$white-dark: darken($white, 20%)
$black: #0F0F0F
$grey: #858585
$grey-light: lighten($grey, 20%)
@@ -31,7 +32,8 @@ $button-background-color: $black
--tertiary: #{$tertiary}
--tertiary-light: #{$tertiary-light}
--tertiary-dark: #{$tertiary-dark}
--white: #{#F9F9FA}
--white: #{$white}
--white-dark: #{$white-dark}
--grey: #{$grey}
--grey-light: #{$grey-light}
--grey2: #{$grey2}
@@ -99,6 +101,14 @@ $button-background-color: $black
line-height: normal
// @media (min-width: 992px)
// font-size: 30px
.sub-header-2
font-family: Inter
font-style: normal
font-weight: 400
line-height: normal
font-size: 24px
@media (min-width: 992px)
font-size: 32px
// :root
// --font-size-text: 16px
src/components/ClaimComponent.vue
+1 -1
View File
@@ -177,7 +177,7 @@ async function claimAll() {
//
console.log("rewardData", rewardData);
//ClaimedReward (address staker, uint256 reward)
const outputClaim = rewardData.topics[2] / 10n ** tokenStore.memeToken.decimals;
const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
showSuccessToast(
formatNumber(outputClaim),
"Success!",
src/components/RewardsWrapper.vue
-1
View File
@@ -33,6 +33,5 @@ const props = defineProps({
padding: 0 6px 6px 6px
border-bottom: 1px solid var(--grey, #858585)
justify-content: space-between
height: 56px
box-sizing: content-box
</style>
src/components/SacrificeToken.vue
+1 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="sacrifice-wrapper card card--glow">
<div class="sacrifice-headline">Select Sacrifice {{ splashBlood }}</div>
<div class="sacrifice-headline">Select Sacrifice</div>
<div class="sacrifice-select-tokens">
<div class="sacrifice-tokens">
<div
@@ -278,7 +278,6 @@ async function approveToken(amount) {
console.log("data", data);
activeToken.value.allowance = await tokenStore.allowance();
sacrificeStore.sacrificeState = 1;
approveToast.value = showApprovedToast();
} catch (error) {
console.error(error);
throw new Error(error);
src/components/StakeComponentV1.vue
+60 -11
View File
@@ -30,13 +30,9 @@
</div>
<div class="connected-stake-body">
<slot name="body">
<token-name-price
v-if="walletStore.memeToken?.staked"
:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
:price="formatNumber(walletStore.memeToken?.staked / 10n ** tokenStore.memeToken.decimals)"
></token-name-price>
<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="Extra Reward" price="+25%"></token-name-price>
<token-name-price class="stake-reward" name="Bonus" price="+25%"></token-name-price>
</slot>
</div>
<slot name="actions">
@@ -134,8 +130,26 @@
<div class="connected-stake-first-round small-text text-center" v-if="cycleStore.currentCycle === 0">
No $BLOOD on the market. Staking is activated after the first cycle is finished.
</div>
<div class="connected-stake-first-round small-text text-center" v-else>
You can claim your stake next cycle
<div
class="connected-stake-first-round small-text text-center"
v-if="walletStore.orderedUnstakedAmount > 0"
>
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>
@@ -197,6 +211,7 @@ const loading = ref(false);
* state 4 staked
*/
const state = ref(0);
const unstakeState = ref(0);
function openStake() {
stake.value = true;
@@ -210,6 +225,31 @@ function openUnstake() {
stakeMenu.value = true;
}
async function unstake() {
try {
unstakeState.value = 1;
const hash = await rewardLockerStore.unstake();
unstakeState.value = 2;
const data = await waitForTransaction({
hash: hash,
});
var rewardData = data.logs.find((logObject) => {
return logObject.topics.find(
(topic) => topic === "0xb89343427f692590c388d6346a8e42ea497eb6682a04db1a53f77ea81771ca91"
);
});
console.log("rewardData", rewardData);
const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
showSuccessToast(formatNumber(outputClaim), "Success!", "You just unstaked");
await walletStore.loadWalletData();
} catch (error) {
console.error("unstake", error);
} finally {
unstakeState.value = 0;
}
}
async function orderUnstake() {
try {
state.value = 2;
@@ -221,22 +261,23 @@ async function orderUnstake() {
state.value = 4;
var rewardData = data.logs.find((logObject) => {
return logObject.topics.find(
(topic) => topic === "0xd0813ff03c470dcc7baa9ce36914dc2febdfd276d639deffaac383fd3db42ba3"
(topic) => topic === "0xf86340d97020c624010a208b733db95795281fbc45cb6e6a40d161f91fa3e4a0"
);
});
console.log("rewardData", rewardData);
const outputClaim = Number(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
showSuccessToast(
formatNumber(outputClaim),
"Success!",
"You just unstaked",
"You can claim your stake next cycle."
);
await walletStore.loadWalletData();
stakeMenu.value = false;
} catch (error) {
console.error("orderUnstake", error);
} finally {
await walletStore.loadWalletData();
state.value = 0;
}
}
@@ -277,6 +318,14 @@ async function stakeToken() {
}
}
const ableToUnstake = computed(() => {
var cycleList = walletStore.memeToken.orderedUnstakedCycles.findIndex((obj) => obj.result > 0n);
if (cycleList && cycleList + 1 <= cycleStore.currentCycle) {
return true;
}
return false;
});
const balanceOf = computed(() => {
if (!walletStore.memeToken?.balanceOf) {
return 0n;
src/components/TokenInput.vue
+1 -1
View File
@@ -14,7 +14,7 @@
</div>
</div>
<div class="right-side">
<token-logo img="/assets/img/vampir.png" :alt="'vampir'"></token-logo>
<token-logo v-if="props.logo" :img="props.logo" :alt="'vampir'"></token-logo>
</div>
</div>
</div>
src/components/TokenNamePrice.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="token-price-wrapper">
<div class="token-name small-text">{{ props.name }}</div>
<div class="token-name mid-text">{{ props.name }}</div>
<div class="token-price sub-header">{{ props.price }}</div>
</div>
</template>
src/main.js
+1 -2
View File
@@ -194,8 +194,7 @@ try {
await tokenStore.initV2();
await rewardLockerStore.init();
await walletStore.loadWalletData();
// console.log("cycleStore.currentCycle", cycleStore.currentCycle);
// await cycleStore.fillCycle(cycleStore.currentCycle);
await cycleStore.fillCycle(cycleStore.currentCycle, true);
await uniswapStore.init();
} else {
walletStore.address = null;
src/stores/rewardlocker.js
+34 -10
View File
@@ -50,9 +50,9 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
functionName: "getRewards",
args: [walletStore.address, cycleNumber, token.contractAddress],
});
}
}
const data = await multicall({
contracts,
contracts,
});
return data;
},
@@ -80,16 +80,15 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
async getSacrificedTokenCoefficient(cycleNumber, sacrificedToken) {
return await this.contract.read.getSacrificedTokenCoefficient([cycleNumber, sacrificedToken]);
},
async getStakeRewardForSacrificeReward(sacrificedToken, reward) {
const walletStore = useWalletStoreV2();
const cycleStore = useCycleStore();
return await this.contract.read.getStakeRewardForSacrificeReward([
async getStakeRewardForSacrificeReward(sacrificedToken, reward) {
const walletStore = useWalletStoreV2();
const cycleStore = useCycleStore();
return await this.contract.read.getStakeRewardForSacrificeReward([
walletStore.address,
sacrificedToken,
reward,
]);
},
},
async lastCompletedCycle() {
return await this.contract.read.lastCompletedCycle();
},
@@ -120,8 +119,15 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
async orderUnstake() {
return await this.contract.write.orderUnstake();
},
async unstake(unstakeCycle) {
return await this.contract.write.unstake([unstakeCycle]);
async unstake() {
const walletStore = useWalletStoreV2();
const cycleStore = useCycleStore();
var cycleList = walletStore.memeToken.orderedUnstakedCycles.findIndex((obj) => obj.result > 0n);
if (cycleList && cycleList + 1 <= cycleStore.currentCycle) {
console.log("cycleList", cycleList);
const hash = await this.contract.write.unstake([cycleList + 1]);
return hash;
}
},
async stakeBloodline(tokenNumber) {
console.log("tokenNumber", tokenNumber);
@@ -171,5 +177,23 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, cycles, addresses]);
return hash;
},
async unstakeOrdered() {
const cycleStore = useCycleStore();
const walletStore = useWalletStoreV2();
const contracts = [];
for (let index = 1; index < cycleStore.currentCycle + 2; index++) {
contracts.push({
...this.contract,
functionName: "unstakeOrdered",
args: [index, walletStore.address],
});
}
const data = await multicall({
contracts,
});
console.log("data123", data);
return data;
},
},
});
src/stores/walletV2.js
+25 -5
View File
@@ -54,12 +54,26 @@ export const useWalletStoreV2 = defineStore("walletV2", {
return obj.contractAddress === tokenStore.memeToken.contractAddress;
}),
unclaimedRewards() {
const tokenStore = useTokenStore();
if (!this.memeToken?.unclaimedRewards) {
return 0n;
}
return this.memeToken.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
const tokenStore = useTokenStore();
if (!this.memeToken?.unclaimedRewards) {
return 0n;
}
return this.memeToken.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
},
orderedUnstakedAmount() {
const tokenStore = useTokenStore();
if (!this.memeToken?.orderedUnstakedAmount) {
return 0n
}
return this.memeToken?.orderedUnstakedAmount / 10n ** tokenStore.memeToken.decimals;
},
staked() {
const tokenStore = useTokenStore();
if (!this.memeToken?.staked) {
return 0n;
}
return this.memeToken?.staked / 10n ** tokenStore.memeToken.decimals;
}
},
actions: {
async init() {
@@ -129,6 +143,12 @@ export const useWalletStoreV2 = defineStore("walletV2", {
const unclaimedRewardsArray = await rewardlockerStore.getTotalRewards(this.address);
const unclaimedRewards = unclaimedRewardsArray[0] + unclaimedRewardsArray[1];
this.memeToken.unclaimedRewards = unclaimedRewards;
this.memeToken.orderedUnstakedCycles = await rewardlockerStore.unstakeOrdered();
console.log("this.memeToken.orderedUnstakedCycles", this.memeToken.orderedUnstakedCycles);
this.memeToken.orderedUnstakedAmount = this.memeToken.orderedUnstakedCycles.reduce((x, y) => {
return x + y.result;
}, 0n);
},
},
// persist: true,
src/views/CycleView.vue
+5 -3
View File
@@ -40,8 +40,10 @@
<template v-if="cycleStore.currentCycle !== cycleStore.activeCycle">
<div class="bloodline-border bloodline-border purple cycle-winner" v-if="cycleStore.getCycleWinner">
<div class="cycle-winner-left">
<div class="cycle-winner-headline">Clan Winner</div>
<div class="cycle-winner-subheadline">+25% Clan Bonus</div>
<div class="cycle-winner-headline">Cycle Winner</div>
<div class="cycle-winner-subheadline">
+25% Clan Bonus on {{ cycleStore.getCycleWinner.name }} Sacrifice
</div>
</div>
<div class="cycle-winner-right">
<div class="cycle-winner-logo">
@@ -269,7 +271,7 @@ function timeBetweenDates(expirationTimestamp) {
.cycle-winner-headline
font-size: 24px
.cycle-winner-subheadline
font-size: 12px
font-size: 14px
.cycle-winner-right
display: flex
flex-direction: column
yarn.lock
+2202 -2202
View File
File diff suppressed because it is too large Load Diff