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

update desktop resize

Browse Source
This commit is contained in:
EmberSpirit
2023-10-05 21:23:59 +02:00
parent 2f712d41d6
commit dd7a0a113d
26 changed files with 595 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SacrificeToken.vue
+55 -52
View File
@@ -21,7 +21,7 @@
<img v-if="isMobile" :src="token.logoMobile" alt="token logo" />
<img v-if="!isMobile" :src="token.logo" alt="token logo" />
</div>
<div class="sacrifice-token-name">{{ token.name }}</div>
<div class="sacrifice-token-name mid-text">{{ token.name }}</div>
</div>
</div>
</div>
@@ -49,9 +49,18 @@
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
</template>
<template v-slot:message-end>
<div class="input-balance tiny-text">
Balance:
{{
walletStore.token.find((obj) => obj.contractAddress === activeToken.contractAddress)
.balanceOf
}}
</div>
</template>
</token-input>
</div>
<div class="sacrifice-divider bloodline-devider">
<div class="bloodline-devider">
<font-awesome-icon :icon="['fas', 'arrow-down']" />
</div>
<div
@@ -62,15 +71,11 @@
purple: output && output > 0,
}"
>
<div class="sarcrifice-to-input">
<div class="sacrifice-to-output">
<div class="sacrifice-to-output-coin">$BLOOD</div>
<div class="sacrifice-to-output-rewards header">{{ output.toFixed(5) }}</div>
</div>
<div class="sacrifice-logo">
<img :src="activeToken.vamp?.logo" :alt="activeToken.vamp?.name" />
</div>
<div class="sacrifice-to-body">
<token-name-price name="$BLOOD" :price="`≈${output?.toFixed(5)}`"></token-name-price>
<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline logo'"></token-logo>
</div>
<div class="sacrifice-staking-bonus">
<div
class="sacrifice-staking-bonus-inner"
@@ -101,7 +106,7 @@
<img src="/assets/img/fuel-noozle.png" alt="fuel noozle" />
</div>
<div class="sacrifice-fees-body">
<div class="sacrifice-fees-body-header">
<div class="sacrifice-fees-body-header mid-text">
<div class="sacrifice-fees-body-header-title">Gas Subsidy</div>
<div class="sacrifice-fees-body-header-amount">≤30 Gwei</div>
</div>
@@ -109,6 +114,7 @@
</div>
</div>
<div class="sacrifice-buttons-function-wrapper">
{{ stateComputed }}
<template v-if="walletStore.connected">
<div class="btn btn-immortal sub-header" disabled v-if="stateComputed === 0">Enter Amount</div>
<div
@@ -154,6 +160,8 @@ import { useUniswapStore } from "@/stores/uniswap";
import StakeComponentV1 from "@/components/StakeComponentV1.vue";
import LoadingComponent from "@/components/LoadingComponent.vue";
import TokenInput from "@/components/TokenInput.vue";
import TokenNamePrice from "@/components/TokenNamePrice.vue";
import TokenLogo from "@/components/TokenLogo.vue";
import StakeSuccessToast from "@/components/toasts/StakeSuccessToast.vue";
import { useToast } from "vue-toastification";
@@ -262,6 +270,7 @@ onBeforeUnmount(() => {
});
async function sacrificeToken(amount) {
console.log("sacrificeToken");
try {
state.value = 2;
const getRewards = await getRewardsFor(amount);
@@ -270,18 +279,27 @@ async function sacrificeToken(amount) {
if (getRewards.variant === "sacrifice") {
console.log("sacrifice");
hash = await memeburnerStore.sacrificeMeme(amount);
console.log("hash", hash);
} else {
console.log("buy");
hash = await memeburnerStore.sacrificeMemeAndBuyBLOOD(amount);
console.log("hash", hash);
}
console.log("hierabc");
console.log("state.value = 2");
console.log("hash", hash);
state.value = 3;
console.log("state.value = 3");
const data = await waitForTransaction({
hash: hash,
});
console.log("data", data);
activeToken.value.allowance = await tokenStore.allowance();
state.value = 4;
console.log("state.value = 4");
showSuccessToast(
tokenStore.activeToken.rewards?.toFixed(5),
"Success!",
@@ -350,17 +368,23 @@ async function getRewardsFor(value) {
BigInt(value * Math.pow(10, activeToken.value.decimals))
);
console.log("rewardsForResult", rewardsForResult);
const rewardsForResultNumber = Number(rewardsForResult[0]) / Math.pow(10, tokenStore.activeToken.decimals);
const rewardsForResultNumber = Number(rewardsForResult) / Math.pow(10, tokenStore.activeToken.decimals);
newOutput = rewardsForResultNumber;
variant = "sacrifice";
} else {
const rewardsForResult = await memeburnerStore.getRewardFor(
BigInt(value * Math.pow(10, activeToken.value.decimals))
);
console.log(
"tokenNumber.value * Math.pow(10, tokenStore.activeToken.decimals)",
tokenNumber.value * Math.pow(10, tokenStore.activeToken.decimals)
);
console.log("tokenNumber.value", tokenNumber.value);
var quoteRewards = await uniswapStore.quoteExactInputSingle(
tokenNumber.value * Math.pow(10, tokenStore.activeToken.decimals)
);
const rewardsForResultNumber = Number(rewardsForResult[0]) / Math.pow(10, tokenStore.activeToken.decimals);
console.log("quoteRewards", quoteRewards);
const rewardsForResultNumber = Number(rewardsForResult) / Math.pow(10, tokenStore.activeToken.decimals);
console.log("rewardsForResultNumber", rewardsForResultNumber);
const quoteRewardsNumber = Number(quoteRewards) / Math.pow(10, tokenStore.activeToken.decimals);
console.log("quoteRewardsNumber", quoteRewardsNumber);
@@ -370,14 +394,13 @@ async function getRewardsFor(value) {
variant = "buy";
// const hash = await memeburnerStore.sacrificeMeme(tokenNumber.value);
} else {
newOutput = rewardsForResultNumber[0];
newOutput = rewardsForResultNumber;
variant = "sacrifice";
//sacrificeMemeAndBuyBLOOD
// const hash = await memeburnerStore.sacrificeMeme(tokenNumber.value);
}
}
console.log("variant", variant);
state.value = 1;
output.value = newOutput;
tokenStore.activeToken.rewards = newOutput;
return { ouput: newOutput, variant: variant };
@@ -453,7 +476,7 @@ function showSuccessToast(value, header, subheader, info) {
.sacrifice-token
border-radius: 16px
padding: 12px
padding: 9px
cursor: pointer
background-color: #0F0F0F
text-align: center
@@ -461,17 +484,18 @@ function showSuccessToast(value, header, subheader, info) {
border: 4px solid transparent
.sacrifice-token-logo
pointer-events: none
// @media (min-width: 992px)
@media (min-width: 992px)
img
height: 100px
width: 100px
// padding: 0
// background-color: unset
&.sacrifice-token--active
border-color: var(--purple)
.sacrifice-token-name
font-size: 16px
@media (min-width: 992px)
padding: 5px 26px
font-size: 24px
.sacrifice-buttons-function-wrapper
text-align: center
@@ -480,27 +504,28 @@ function showSuccessToast(value, header, subheader, info) {
@media (min-width: 992px)
display: flex
.btn
padding: 16px 64px
padding: 12px 48px
.sacrifice-fees-info-wrapper
display: flex
border: 2px dashed var(--grey)
border: 1px dashed var(--grey)
color: var(--grey)
border-radius: 16px
padding: 16px
font-size: 16px
gap: 16px
padding: 12px
gap: 12px
.sacrifice-fees-img
img
height: 46px
.sacrifice-fees-body
flex: 1 1 auto
display: flex
flex-direction: column
justify-content: space-between
.sacrifice-fees-body-header
display: flex
flex-direction: row
justify-content: space-between
margin-bottom: 8px
@media (min-width: 992px)
font-size: 24px
margin-bottom: 0
.sacrifice-from-to-wrapper
@@ -511,20 +536,6 @@ function showSuccessToast(value, header, subheader, info) {
@media (min-width: 992px)
gap: 32px
.sacrifice-from-wrapper
.sarcrifice-from-input
display: flex
margin-bottom: 8px
@media (min-width: 992px)
height: 60px
input
width: 100%
height: 45px
font-size: 24px
border-radius: 16px
padding: 0 16px
@media (min-width: 992px)
font-size: 32px
height: auto
.sacrifice-logo
margin-left: 16px
img
@@ -553,13 +564,13 @@ function showSuccessToast(value, header, subheader, info) {
font-size: 14px
background: var(--grey, #858585)
color: var(--midnight-black, #0F0F0F)
@media (min-width: 992px)
font-size: 16px
&:hover,
&:active,
&:focus
background-color: var(--grey-light)
cursor: pointer
@media (min-width: 992px)
font-size: 12px
// .sacrifice-adder-balance
// margin-left: auto
// .sacrifice-adder-max
@@ -574,19 +585,11 @@ function showSuccessToast(value, header, subheader, info) {
.sacrifice-to-wrapper
display: flex
flex-direction: column
gap: 24px
.sarcrifice-to-input
gap: 18px
.sacrifice-to-body
display: flex
justify-content: space-between
.sacrifice-logo
img
width: 45px
height: 45px
border-radius: 50%
pointer-events: none
@media (min-width: 992px)
height: 82px
width: 82px
height: 56px
.sacrificed-info
display: flex
padding: 8px 24px