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

update cycleview, pageview + profileview

Browse Source
This commit is contained in:
EmberSpirit
2023-08-30 18:08:51 +02:00
parent c8f7c7cd5e
commit cd773e16c9
19 changed files with 2093 additions and 20238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1363 -19786
View File
File diff suppressed because it is too large Load Diff
src/App.vue
+69 -86
View File
@@ -1,6 +1,7 @@
<script setup> <script setup>
import { onMounted, onUnmounted, provide, ref } from "vue"; import { onMounted, onUnmounted, provide, ref } from "vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { useRoute, useRouter } from "vue-router";
import Navbar from "./components/Navbar.vue"; import Navbar from "./components/Navbar.vue";
import { useWalletStoreV2 } from "@/stores/walletV2"; import { useWalletStoreV2 } from "@/stores/walletV2";
@@ -39,6 +40,9 @@ const netWorkEvent = ref(null);
const memeSacrificedEvent = ref(null); const memeSacrificedEvent = ref(null);
const clientClientEvent = ref(null); const clientClientEvent = ref(null);
const router = useRouter();
const route = useRoute();
isMobile.value = isMobileFunc(); isMobile.value = isMobileFunc();
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("resize", handleWindowSizeChange); window.removeEventListener("resize", handleWindowSizeChange);
@@ -65,10 +69,19 @@ function isMobileFunc() {
return false; return false;
} }
} }
function changeRoute(name) {
console.log("route", route);
console.log("router", router);
router.push({
name: name,
});
}
provide("isMobile", isMobile); provide("isMobile", isMobile);
provide("showPanel", showPanel); provide("showPanel", showPanel);
onMounted(async () => { onMounted(async () => {
console.log("onmounted");
window.addEventListener("resize", handleWindowSizeChange); window.addEventListener("resize", handleWindowSizeChange);
handleWindowSizeChange(); handleWindowSizeChange();
@@ -85,83 +98,6 @@ onMounted(async () => {
// roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound()); // roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
// console.log("roundsStore.currentRound", roundsStore.currentRound); // console.log("roundsStore.currentRound", roundsStore.currentRound);
// roundsStore.activeRound = roundsStore.currentRound; // roundsStore.activeRound = roundsStore.currentRound;
await roundsStore.fillRound(roundsStore.activeRound);
//events
eventWatch.value = watchAccount(async (account) => {
console.log("account123", account);
const publicClient = getPublicClient();
console.log("publicClient", publicClient);
// {chainId: }
console.log("walletClient", walletClient);
if (account.address) {
walletStore.address = account.address;
walletStore.connected = true;
let chainObject = walletStore.chain;
if (!walletStore.chain) {
const { chain, chains } = getNetwork();
chainObject = chain;
}
var walletClient = await getWalletClient({
account: account.address,
chainId: chainObject.id,
});
walletStore.walletClient = walletClient;
// walletStore.getTokenBalances()
await memeBurnerStore.init();
console.log("hierabc");
await tokenStore.initV2();
} else {
walletStore.address = null;
walletStore.connected = false;
walletStore.walletClient = null;
}
});
netWorkEvent.value = watchNetwork((network) => {
console.log("network123", network);
if (network.chain) {
walletStore.chain = network.chain;
clientClientEvent.value = watchWalletClient(
{
chainId: network.chain.id,
},
(walletClient) => {
walletStore.walletClient = walletClient;
console.log("wc123", walletClient);
}
);
}
});
memeSacrificedEvent.value = watchContractEvent(
{
address: memeBurnerStore.config.contractAddress,
abi: memeBurnerStore.config.abi,
eventName: "MemeSacrificed",
},
async (log) => {
console.log("memeSacrificedEvent", log);
const token = log[0].args.sacrificedToken;
await roundsStore.updateCurrentRound(token);
}
);
await tokenStore.initV2();
await memeBurnerStore.init();
await rewardLockerStore.init();
await memeBurnerStore.init();
// init
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound;
await roundsStore.fillRound(roundsStore.activeRound);
await walletStore.loadWalletData();
}); });
</script> </script>
@@ -175,7 +111,7 @@ onMounted(async () => {
</div> </div>
<div class="footer"> <div class="footer">
<div class="footer-inner"> <div class="footer-inner">
Follow Bloodline <div class="footer-headline">Follow Bloodline</div>
<!-- $BLOOD is 100%<br /> <!-- $BLOOD is 100%<br />
community owned.<br /> community owned.<br />
No team %, no pre-mine. --> No team %, no pre-mine. -->
@@ -184,36 +120,83 @@ onMounted(async () => {
<div class="social-bloodline-badge-icon"> <div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" /> <font-awesome-icon icon="fa-brands fa-discord" />
</div> </div>
<div class="social-bloodline-badge-text">Discord</div>
</div> </div>
<div class="social-bloodline-badge"> <div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon"> <div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-telegram" /> <font-awesome-icon icon="fa-brands fa-telegram" />
</div> </div>
<div class="social-bloodline-badge-text">Telegram</div>
</div> </div>
<div class="social-bloodline-badge"> <div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon"> <div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-twitter" /> <font-awesome-icon icon="fa-brands fa-twitter" />
</div> </div>
<div class="social-bloodline-badge-text">Twitter</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="mobile-navigation-bar" v-if="isMobile">
<div @click="changeRoute('home')" :class="{ active: route.name === 'home' }">
<font-awesome-icon icon="fa-droplet" />
</div>
<div @click="changeRoute('cycle')" :class="{ active: route.name === 'cycle' }">
<font-awesome-icon icon="fa-moon" />
</div>
<div @click="changeRoute('profile')" :class="{ active: route.name === 'profile' }">
<font-awesome-icon icon="fa-person" />
</div>
</div>
</template> </template>
<style lang="sass"> <style lang="sass">
.footer .footer
height: 450px height: auto
min-height: 450px background-color: var(--midnight-black)
background-color: var(--grey2) @media (min-width: 992px)
height: 450px
min-height: 450px
.footer-inner .footer-inner
padding: 24px padding: 16px 0 24px 0
font-size: 24px font-size: 24px
text-align: center display: flex
flex-direction: column
gap: 8px
align-items: center
.footer-headline
font-size: 16px
.footer-social-links
display: flex
gap: 24px
.social-bloodline-badge
border-radius: 14px
background: var(--grey, #858585)
display: flex
padding: 0px 16px
align-items: center
flex: 0 1 0
color: black
.social-bloodline-badge-icon
font-size: 16px
.main .main
&.mobile &.mobile
&.no-scroll &.no-scroll
overflow: hidden overflow: hidden
.mobile-navigation-bar
height: 72px
width: 100%
padding: 16px 48px
border-radius: 24px 24px 0px 0px
background: var(--grey, #858585)
bottom: -1px
position: fixed
display: flex
justify-content: space-around
align-items: center
color: black
div
font-size: 40px
cursor: pointer
&.active
color: var(--purple)
</style> </style>
src/assets/sass/base.sass
+4
View File
@@ -11,6 +11,8 @@
border: 2px solid #000 border: 2px solid #000
&.bloodline-border--variant1 &.bloodline-border--variant1
border: 4px solid var(--midnight-black) border: 4px solid var(--midnight-black)
&.bloodline-border__thin
border-width: 1px
@media (min-width: 992px) @media (min-width: 992px)
padding: 24px 32px padding: 24px 32px
border: 4px solid #000 border: 4px solid #000
@@ -18,6 +20,8 @@
border-color: var(--purple) border-color: var(--purple)
&.white &.white
border-color: var(--white) border-color: var(--white)
&.grey
border-color: var(--grey, #858585)
.bloodline-badge .bloodline-badge
padding: 8px 16px 8px 16px padding: 8px 16px 8px 16px
src/assets/sass/variables.sass
+1 -1
View File
@@ -30,7 +30,7 @@ $button-background-color: $black
--tertiary-light: #{$tertiary-light} --tertiary-light: #{$tertiary-light}
--tertiary-dark: #{$tertiary-dark} --tertiary-dark: #{$tertiary-dark}
--white: #{#F9F9FA} --white: #{#F9F9FA}
--grey: #{$grey} --grey: #{#858585}
--grey2: #{$grey2} --grey2: #{$grey2}
--purple: #{$purple} --purple: #{$purple}
--blood-color: #{$red} --blood-color: #{$red}
src/components/BloodChart.vue
+26 -28
View File
@@ -9,28 +9,28 @@
</div> </div>
<div class="blood-chart-element-body"> <div class="blood-chart-element-body">
<div class="blood-chart-bar-wrapper"> <div class="blood-chart-bar-wrapper">
<svg
class="waves"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none"
shape-rendering="auto"
>
<defs>
<path
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
</g>
</svg>
<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`"> <div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
<svg
class="waves"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none"
shape-rendering="auto"
>
<defs>
<path
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
</g>
</svg>
<div class="wrapper"> <div class="wrapper">
<div><span class="dot"></span></div> <div><span class="dot"></span></div>
<div><span class="dot"></span></div> <div><span class="dot"></span></div>
@@ -60,7 +60,7 @@ import { useMemeburnerStore } from "@/stores/memeburner";
const memeBurnerStore = useMemeburnerStore(); const memeBurnerStore = useMemeburnerStore();
const props = defineProps({ const props = defineProps({
data: Array, data: Object,
}); });
console.log(props.data); console.log(props.data);
@@ -126,23 +126,21 @@ function getImageUrl(url) {
flex: 0 0 500px flex: 0 0 500px
border-radius: 8px 8px 40px 40px border-radius: 8px 8px 40px 40px
text-align: left text-align: left
overflow: hidden
.blood-chart-bar-wrapper .blood-chart-bar-wrapper
height: 100% height: 100%
display: flex display: flex
flex-direction: column flex-direction: column
.blood-chart-bar .waves
margin-top: auto margin-top: auto
.blood-chart-bar
background-color: var(--blood-color) background-color: var(--blood-color)
position: relative position: relative
border-radius: 0 0 40px 40px border-radius: 0 0 40px 40px
.blood-chart-bar-percentage .blood-chart-bar-percentage
font-size: 14px font-size: 14px
text-align: center text-align: center
.waves
position: absolute
top: -10px
width: 100%
height: 10px
.blood-chart-element-footer .blood-chart-element-footer
margin-top: 32px margin-top: 32px
text-align: center text-align: center
src/components/ConnectWallet.vue
+3 -32
View File
@@ -45,25 +45,7 @@
<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo> <token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
</div> </div>
</div> </div>
<div class="connected-stake bloodline-border white"> <stake-component></stake-component>
<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>
<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>
</div> </div>
</template> </template>
@@ -74,16 +56,15 @@ import { useTokenStore } from "@/stores/tokens";
import Meme1Json from "@/assets/contracts/Meme1.json"; import Meme1Json from "@/assets/contracts/Meme1.json";
import TokenNamePrice from "./TokenNamePrice.vue"; import TokenNamePrice from "./TokenNamePrice.vue";
import TokenLogo from "./TokenLogo.vue"; import TokenLogo from "./TokenLogo.vue";
import StakeComponent from "./StakeComponent.vue";
import TokenInput from "./TokenInput.vue"; import TokenInput from "./TokenInput.vue";
import StakeMenu from "./StakeMenu.vue";
import { getAddressShortName, getblocky } from "@/helper/helper.js"; import { getAddressShortName, getblocky } from "@/helper/helper.js";
import { disconnect } from "@wagmi/core"; import { disconnect } from "@wagmi/core";
const walletStore = useWalletStoreV2(); const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore(); const tokenStore = useTokenStore();
const stakeMenu = ref(false);
const stake = ref(null);
const goerliKey = import.meta.env.VITE_GOERLI_KEY; const goerliKey = import.meta.env.VITE_GOERLI_KEY;
const fromAddress = ref(null); const fromAddress = ref(null);
@@ -108,16 +89,6 @@ async function connectWallet(connector) {
instance.parent.emit("update:modelValue", false); instance.parent.emit("update:modelValue", false);
await walletStore.connectWallet(toRaw(connector)); await walletStore.connectWallet(toRaw(connector));
} }
function openStake() {
stake.value = true;
stakeMenu.value = true;
}
function openUnstake() {
stake.value = false;
stakeMenu.value = true;
}
</script> </script>
<style lang="sass"> <style lang="sass">
src/components/RewardsWrapper.vue
+27 -29
View File
@@ -1,12 +1,9 @@
<template> <template>
<div class="rewards-wrapper"> <div class="rewards-wrapper">
<div class="rewards-header"> <div class="rewards-headline">
<div class="rewards-header-title"> {{ props.title }}
{{ props.title }}
</div>
<div class="rewards-header-info">{{ props.info }}</div>
</div> </div>
<div class="rewards-sacrifice-wrapper bloodline-border bloodline-border--variant1"> <div class="rewards-inner">
<div class="rewards-body"> <div class="rewards-body">
<div class="rewards-coin">$BLOOD</div> <div class="rewards-coin">$BLOOD</div>
<div class="rewards-amount">{{ props.amount }}</div> <div class="rewards-amount">{{ props.amount }}</div>
@@ -26,29 +23,30 @@ const props = defineProps({
</script> </script>
<style lang="sass"> <style lang="sass">
.rewards-header .rewards-wrapper
font-size: 16px
padding: 8px
display: flex display: flex
@media (min-width: 992px) flex-direction: column
font-size: 24px gap: 8px
.rewards-header-info .rewards-headline
margin-left: auto font-size: 16px
.rewards-sacrifice-wrapper, .rewards-clan-wrapper .rewards-inner, .rewards-clan-wrapper
display: flex display: flex
.rewards-body padding: 0 8px 8px 8px
align-self: center border-bottom: 1px solid var(--grey, #858585)
.rewards-coin .rewards-body
font-size: 16px align-self: center
@media (min-width: 992px) .rewards-coin
font-size: 16px
@media (min-width: 992px)
font-size: 24px
.rewards-amount
text-align: left
font-size: 24px font-size: 24px
.rewards-amount margin-top: 8px
font-size: 24px @media (min-width: 992px)
margin-top: 8px font-size: 40px
@media (min-width: 992px) margin-top: 0
font-size: 40px img
margin-top: 0 margin-left: auto
img align-self: center
margin-left: auto
align-self: center
</style> </style>
src/components/SlideoutPanel.vue
+1 -1
View File
@@ -51,7 +51,7 @@ function testClick(e) {
right: 0 right: 0
bottom: unset bottom: unset
&.open &.open
margin-bottom: -10vh margin-bottom: -82px
@media (min-width: 992px) @media (min-width: 992px)
margin-right: 0 margin-right: 0
.slideout-panel .slideout-panel
src/components/StakeComponent.vue
+49
View File
@@ -0,0 +1,49 @@
<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>
<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>
</template>
<script setup>
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";
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const stakeMenu = ref(false);
const stake = ref(null);
function openStake() {
stake.value = true;
stakeMenu.value = true;
}
function openUnstake() {
stake.value = false;
stakeMenu.value = true;
}
</script>
<style lang="sass"></style>
src/components/TokenClaim.vue
+45 -6
View File
@@ -1,5 +1,6 @@
<template> <template>
<div class="claim bloodline-border"> <div class="claim bloodline-border bloodline-border__thin grey">
<div class="claim-headline">You Cycle Rewards</div>
<div class="rewards-wrapper" v-if="!isMobile"> <div class="rewards-wrapper" v-if="!isMobile">
<rewards-wrapper <rewards-wrapper
title="Sacrafice Reward" title="Sacrafice Reward"
@@ -18,16 +19,25 @@
/> />
</div> </div>
<div class="rewards-list" v-else> <div class="rewards-list" v-else>
<rewards-wrapper title="Total Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" /> <rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
<rewards-wrapper <rewards-wrapper
title="Total Stake Reward" title="Staking Bonus"
coin="$BLOOD" coin="$BLOOD"
amount="0" amount="0 todo"
info="max: 312m" info="max: 312m"
image="/assets/img/vampir.png" image="/assets/img/vampir.png"
/> />
<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" /> <rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" /> </div>
<div class="rewards-total-wrapper">
<div class="rewards-total-headline">Total Reward</div>
<div class="rewards-total-inner bloodline-border bloodline-border--variant1">
<div class="rewards-body">
<div class="rewards-coin">$BLOOD</div>
<div class="rewards-amount">todo</div>
</div>
<img class="bloodline-token" src="/assets/img/token/bloodline.png" alt="vampir" />
</div>
</div> </div>
<div class="claim-button"> <div class="claim-button">
<div v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div> <div v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div>
@@ -72,10 +82,14 @@ async function claimRewards() {
<style lang="sass"> <style lang="sass">
.claim .claim
display: flex display: flex
padding: 32px 20px padding: 12px
flex-direction: column flex-direction: column
@media (min-width: 992px) @media (min-width: 992px)
padding: 32px 40px padding: 32px 40px
.claim-headline
font-size: 18px
text-align: left
margin-bottom: 16px
.claim-button .claim-button
text-align: center text-align: center
margin: 32px 0 margin: 32px 0
@@ -89,4 +103,29 @@ async function claimRewards() {
margin-bottom: 16px margin-bottom: 16px
.rewards-divider .rewards-divider
text-align: center text-align: center
.rewards-total-wrapper
display: flex
flex-direction: column
gap: 8px
.rewards-total-headline
font-size: 16px
text-align: left
.rewards-total-inner
display: flex
justify-content: space-between
text-align: left
.rewards-left
display: flex
flex-direction: column
gap: 8px
.name
font-size: 16px
.amount
font-size: 24px
.rewards-right
img
height: 49px
width: 49px
border-radius: 50%
</style> </style>
src/main.js
+74 -6
View File
@@ -1,9 +1,31 @@
import './assets/sass/main.sass' import './assets/sass/main.sass'
import { useWalletStoreV2 } from "@/stores/walletV2";
import { createApp } from 'vue' import { createApp } from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
import {
createConfig,
configureChains,
getAccount,
getContract,
connect,
disconnect,
InjectedConnector,
watchAccount,
getWalletClient,
fetchBalance,
multicall,
} from "@wagmi/core";
import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
import { MetaMaskConnector } from "@wagmi/core/connectors/metaMask";
import { CoinbaseWalletConnector } from "@wagmi/core/connectors/coinbaseWallet";
import { goerli, mainnet } from "@wagmi/core/chains";
import { publicProvider } from "@wagmi/core/providers/public";
import { alchemyProvider } from "@wagmi/core/providers/alchemy";
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
@@ -14,14 +36,14 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */ /* import specific icons */
import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket } from "@fortawesome/free-solid-svg-icons"; import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket, faDroplet, faMoon, faPerson } from "@fortawesome/free-solid-svg-icons";
import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons"; import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
/* add icons to the library */ /* add icons to the library */
library.add( library.add(
faArrowDown, faArrowDown,
faArrowRight, faArrowRight,
faDiscord, faDiscord,
faTwitter, faTwitter,
faTelegram, faTelegram,
@@ -31,19 +53,65 @@ library.add(
faCaretRight, faCaretRight,
faBars, faBars,
faAnglesRight, faAnglesRight,
faArrowRightToBracket, faArrowRightToBracket,
faArrowRightFromBracket, faArrowRightFromBracket,
faChevronDown, faChevronDown,
faChevronUp faChevronUp,
faDroplet,
faMoon,
faPerson
); );
const app = createApp(App) const app = createApp(App)
const pinia = createPinia(); const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); pinia.use(piniaPluginPersistedstate);
app.use(pinia); app.use(pinia);
const walletStore = useWalletStoreV2();
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
console.log("hier chains");
const { chains, publicClient, webSocketPublicClient } = configureChains(
[goerli, mainnet],
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
);
walletStore.config = createConfig({
autoConnect: true,
connectors: [
new CoinbaseWalletConnector({
chains,
options: {
appName: "wagmi demo",
},
}),
new MetaMaskConnector({ chains }),
new WalletConnectConnector({
chains,
options: {
projectId: projectId,
showQrModal: true,
metadata: {
name: "Bloodline-App",
description: "TODO Bloodline Description",
url: "https://gitea.loseyourip.com/",
icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
},
},
}),
],
publicClient,
webSocketPublicClient,
});
walletStore.publicClient = publicClient;
app.use(router) app.use(router)
app.component('font-awesome-icon', FontAwesomeIcon) app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app') app.mount('#app')
src/middleware/connected.js
View File
src/router/index.js
+111 -14
View File
@@ -5,11 +5,19 @@ import { useTokenStore } from "@/stores/tokens";
import { useContractStore } from "@/stores/contracts"; import { useContractStore } from "@/stores/contracts";
import { useMemeburnerStore } from "@/stores/memeburner"; import { useMemeburnerStore } from "@/stores/memeburner";
import { useRewardLockerStore } from "@/stores/rewardlocker"; import { useRewardLockerStore } from "@/stores/rewardlocker";
import { useMultiCallStore } from "@/stores/multicall";
import { useRoundsStore } from "@/stores/rounds"; import { useRoundsStore } from "@/stores/rounds";
import {ref} from "vue"
import { import {
watchAccount,
watchNetwork,
watchContractEvent,
watchWalletClient,
getAccount, getAccount,
getNetwork,
getPublicClient,
getWalletClient,
} from "@wagmi/core"; } from "@wagmi/core";
const router = createRouter({ const router = createRouter({
@@ -40,12 +48,18 @@ const router = createRouter({
}, },
{ {
path: "/profile", path: "/profile",
name: "Profile", name: "profile",
meta: {
middleware: ["connected"],
},
component: () => import("../views/ProfileView.vue"), component: () => import("../views/ProfileView.vue"),
}, },
{ {
path: "/cycle", path: "/cycle",
name: "Cycle", name: "cycle",
meta: {
middleware: ["connected"],
},
component: () => import("../views/CycleView.vue"), component: () => import("../views/CycleView.vue"),
}, },
], ],
@@ -53,27 +67,110 @@ const router = createRouter({
router.beforeEach(async (to, from) => { router.beforeEach(async (to, from) => {
//init //init
const showPanel = ref(false);
const eventWatch = ref(null);
const netWorkEvent = ref(null);
const memeSacrificedEvent = ref(null);
const clientClientEvent = ref(null);
console.log("beforeEach");
const tokenStore = useTokenStore(); const tokenStore = useTokenStore();
const memeBurnerStore = useMemeburnerStore(); const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore(); const rewardLockerStore = useRewardLockerStore();
const roundsStore = useRoundsStore(); const roundsStore = useRoundsStore();
const walletStore = useWalletStoreV2(); const walletStore = useWalletStoreV2();
console.log("walletStore.publicClient", walletStore.publicClient);
if (!walletStore.initialized) {
walletStore.initialized = true
console.log("hier");
await walletStore.init();
await tokenStore.initV2();
await memeBurnerStore.init();
await rewardLockerStore.init();
await memeBurnerStore.init();
console.log("init router");
console.log("roundsStore.currentRound", roundsStore.currentRound);
if (!roundsStore.currentRound) {
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound;
}
if (!walletStore.publicClient) { //events
await walletStore.init(); eventWatch.value = watchAccount(async (account) => {
await tokenStore.initV2(); console.log("account123", account);
await memeBurnerStore.init(); const publicClient = getPublicClient();
await rewardLockerStore.init(); console.log("publicClient", publicClient);
await memeBurnerStore.init();
// {chainId: }
console.log("walletClient", walletClient);
if (account.address) {
walletStore.address = account.address;
walletStore.connected = true;
let chainObject = walletStore.chain;
if (!walletStore.chain) {
const { chain, chains } = getNetwork();
chainObject = chain;
}
var walletClient = await getWalletClient({
account: account.address,
chainId: chainObject.id,
});
walletStore.walletClient = walletClient;
// walletStore.getTokenBalances()
await memeBurnerStore.init();
console.log("hierabc");
await tokenStore.initV2();
} else {
walletStore.address = null;
walletStore.connected = false;
walletStore.walletClient = null;
}
});
netWorkEvent.value = watchNetwork((network) => {
console.log("network123", network);
if (network.chain) {
walletStore.chain = network.chain;
clientClientEvent.value = watchWalletClient(
{
chainId: network.chain.id,
},
(walletClient) => {
walletStore.walletClient = walletClient;
console.log("wc123", walletClient);
}
);
}
});
memeSacrificedEvent.value = watchContractEvent(
{
address: memeBurnerStore.config.contractAddress,
abi: memeBurnerStore.config.abi,
eventName: "MemeSacrificed",
},
async (log) => {
console.log("memeSacrificedEvent", log);
const token = log[0].args.sacrificedToken;
await roundsStore.updateCurrentRound(token);
}
);
await roundsStore.fillRound(roundsStore.activeRound);
await walletStore.loadWalletData();
}
if (!roundsStore.currentRound) { //middleware
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound()); if (to.meta.middleware) {
console.log("roundsStore.currentRound", roundsStore.currentRound); if (!walletStore.connected) {
roundsStore.activeRound = roundsStore.currentRound; return false;
} }
} }
// initContracts
return true; return true;
}); });
src/stores/rounds.js
+10 -1
View File
@@ -14,6 +14,15 @@ export const useRoundsStore = defineStore("rounds", {
currentRound: null currentRound: null
}), }),
getters: { getters: {
getRoundWinner() {
const goal = this.getCurrentRoundData?.goal;
const winnerCoin = this.rounds[this.activeRound]?.token.find((token) => token.amount === goal)
if (winnerCoin) {
return winnerCoin;
} else {
return false;
}
},
getCurrentRoundData() { getCurrentRoundData() {
return this.rounds[this.activeRound]; return this.rounds[this.activeRound];
} }
@@ -31,7 +40,7 @@ export const useRoundsStore = defineStore("rounds", {
for (let index = 0; index < this.currentRound; index++) { for (let index = 0; index < this.currentRound; index++) {
console.log("load round: " + index); console.log("load round: " + index);
// await this.fillRound(index) // await this.fillRound(index)
console.log({index, address: walletStore.address});
contracts.push({ contracts.push({
...rewardLockerStore.contract, ...rewardLockerStore.contract,
functionName: "getTotalRewardsOf", functionName: "getTotalRewardsOf",
src/stores/walletV2.js
+11 -40
View File
@@ -39,7 +39,8 @@ export const useWalletStoreV2 = defineStore("walletV2", {
walletClient: null, walletClient: null,
config: null, config: null,
chain: null, chain: null,
token: [], token: [],
initialized: false
}), }),
getters: { getters: {
sacrificeToken: (state) => state.token.filter((obj) => obj.contractAddress !== MemeToken.contractAddress), sacrificeToken: (state) => state.token.filter((obj) => obj.contractAddress !== MemeToken.contractAddress),
@@ -48,42 +49,7 @@ export const useWalletStoreV2 = defineStore("walletV2", {
actions: { actions: {
async init() { async init() {
console.log("wallet init"); console.log("wallet init");
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
const { chains, publicClient, webSocketPublicClient } = configureChains(
[goerli, mainnet],
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
);
this.config = createConfig({
autoConnect: true,
connectors: [
new CoinbaseWalletConnector({
chains,
options: {
appName: "wagmi demo",
},
}),
new MetaMaskConnector({ chains }),
new WalletConnectConnector({
chains,
options: {
projectId: projectId,
showQrModal: true,
metadata: {
name: "Bloodline-App",
description: "TODO Bloodline Description",
url: "https://gitea.loseyourip.com/",
icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
},
},
}),
],
publicClient,
webSocketPublicClient,
});
this.publicClient = publicClient;
console.log("hier123"); console.log("hier123");
const account = getAccount(); const account = getAccount();
@@ -148,7 +114,9 @@ export const useWalletStoreV2 = defineStore("walletV2", {
}); });
console.log("data", data); console.log("data", data);
for (let index = 0; index < tokenStore.token.length; index++) { for (let index = 0; index < tokenStore.token.length; index++) {
const token = tokenStore.token[index]; const token = tokenStore.token[index];
console.log("token", token);
console.log("data[index].result", data[index].result);
const balanceOfDecimal = data[index].result / BigInt(Math.pow(10, token.decimals)); const balanceOfDecimal = data[index].result / BigInt(Math.pow(10, token.decimals));
this.token.push({ this.token.push({
contractAddress: token.contractAddress, contractAddress: token.contractAddress,
@@ -157,15 +125,18 @@ export const useWalletStoreV2 = defineStore("walletV2", {
} }
}, },
async loadWalletData() { async loadWalletData() {
if (!this.connected) {
return
}
console.log("loadWalletData");
const rewardlockerStore = useRewardLockerStore(); const rewardlockerStore = useRewardLockerStore();
await this.getTokenBalances(); await this.getTokenBalances();
//MemeToken Staked //MemeToken Staked
const tokenStore = useTokenStore(); const tokenStore = useTokenStore();
const staked = await rewardlockerStore.getStaked(this.address); const staked = await rewardlockerStore.getStaked(this.address);
console.log("staked", staked);
this.memeToken.staked = Number(staked / BigInt(Math.pow(10, tokenStore.memeToken.decimals))); this.memeToken.staked = Number(staked / BigInt(Math.pow(10, tokenStore.memeToken.decimals)));
} }
src/views/CycleView.vue
+236 -11
View File
@@ -1,21 +1,246 @@
<template> <template>
<div class="cycle-page"> <div class="cycle-page">
<div class="bloodline-page-headline">Cycle</div> <div class="cycle-header container">
<div class="bloodline-page-description container"> <div class="bloodline-page-headline">Cycle</div>
Claim and trade your $BDL at each cycle's end. Become the most powerful meme clan each cycle and win extra <div class="bloodline-page-description">
rewards. Claim and trade your $BDL at each cycle's end. Become the most powerful meme clan each cycle and win
extra rewards.
</div>
</div>
<div class="slider-wrapper">
<font-awesome-icon
:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
@click="prevSlide"
:icon="['fas', 'caret-left']"
/>
<div class="slider-text">Cycle {{ roundsStore.activeRound }}</div>
<font-awesome-icon
:class="{ 'slider-next': true, disabled: roundsStore.currentRound === roundsStore.activeRound }"
@click="nextSlide"
:icon="['fas', 'caret-right']"
/>
</div>
<div class="cycle card bloodline-wrapper container">
<div class="bloodline-border">
<table>
<tr>
<td>Sacrifice:</td>
<td class="divider"></td>
<!-- <td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td> -->
<td>{{ roundsStore.getCurrentRoundData?.goalInBLD }} $BDL</td>
</tr>
<tr>
<td>Time left:</td>
<td class="divider"></td>
<td v-if="roundsStore.currentRound === roundsStore.activeRound">
{{ days }} {{ hours }} {{ minutes }}
</td>
<td v-else>0</td>
</tr>
</table>
</div>
<div class="bloodline-border bloodline-border__thin grey cycle-winner" v-if="roundsStore.getRoundWinner">
<div class="cycle-winner-left">
<div class="cycle-winner-headline">Clan Winner</div>
<div class="cycle-winner-subheadline">+20% Clan Bonus</div>
</div>
<div class="cycle-winner-right">
<div class="cycle-winner-logo">
<img :src="roundsStore.getRoundWinner.vamplogo" alt="" />
</div>
<div class="cycle-winner-name">{{ roundsStore.getRoundWinner.name }}</div>
</div>
</div>
<div class="bloodline-border bloodline-border__thin grey cycle-winner" v-else>
<div class="cycle-winner-left">
<div class="cycle-winner-headline">No Clan Winner</div>
<div class="cycle-winner-subheadline">TODO time limit reached or activeround</div>
</div>
<div class="cycle-winner-right">
<div class="cycle-winner-logo inactive">
<img src="/assets/img/token/bloodline.png" alt="" />
</div>
</div>
</div>
<token-claim></token-claim>
<div class="bloodline-clan">
<h3>Bloodline Clan</h3>
<p>
Win extra rewards for you and your clan. Increase the strength of your bloodline by sacrificing more
memes.
</p>
<table class="bonus-table" v-if="!isMobile">
<tbody>
<tr>
<th scope="row">1st</th>
<td>100% Bonus</td>
</tr>
<tr>
<th scope="row">2nd</th>
<td>50% Bonus</td>
</tr>
<tr>
<th scope="row">3rd</th>
<td>No Bonus</td>
</tr>
</tbody>
</table>
<div class="bloodline-container" v-else>
<div class="bloodline-border purple">Get up to +100% Clan Bonus <br />on your sacrifice.</div>
</div>
<div class="blood-chart">
<blood-chart :data="roundsStore.rounds[roundsStore.activeRound]"></blood-chart>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup></script> <script setup>
import { inject, ref, onMounted, onBeforeUnmount } from "vue";
import BloodChart from "@/components/BloodChart.vue";
import TokenClaim from "@/components/TokenClaim.vue";
import { useRoundsStore } from "@/stores/rounds";
const roundsStore = useRoundsStore();
const days = ref(null);
const hours = ref(null);
const minutes = ref(null);
const seconds = ref(null);
const timer = ref(null);
const isMobile = inject("isMobile");
onMounted(() => {
console.log("onmounted", roundsStore.activeRound);
console.log("blatest", roundsStore.getCurrentRoundData.expirationTimestamp);
const expirationTimestamp = roundsStore.getCurrentRoundData.expirationTimestamp;
timer.value = setInterval(function () {
timeBetweenDates(expirationTimestamp);
}, 1000);
});
onBeforeUnmount(() => {
clearInterval(timer.value);
});
async function prevSlide() {
console.log("blub1", roundsStore.activeRound);
if (roundsStore.activeRound > 1) {
roundsStore.activeRound--;
await roundsStore.fillRound(roundsStore.activeRound);
}
}
async function nextSlide() {
if (roundsStore.activeRound < roundsStore.currentRound) {
roundsStore.activeRound++;
await roundsStore.fillRound(roundsStore.activeRound);
}
}
function timeBetweenDates(expirationTimestamp) {
const dateEntered = new Date(Number(expirationTimestamp) * 1000);
if (dateEntered) {
var now = new Date();
var difference = dateEntered.getTime() - now.getTime();
console.log("difference", difference);
if (difference <= 0) {
clearInterval(timer.value);
} else {
var _seconds = Math.floor(difference / 1000);
var _minutes = Math.floor(_seconds / 60);
var _hours = Math.floor(_minutes / 60);
var _days = Math.floor(_hours / 24);
console.log("_days", _days);
days.value = _days;
hours.value = _hours % 24;
minutes.value = _minutes % 60;
seconds.value = _seconds % 60;
days.value = ("0" + days.value).slice(-2) + "d";
hours.value = ("0" + hours.value).slice(-2) + "h";
minutes.value = ("0" + minutes.value).slice(-2) + "m";
}
}
}
</script>
<style lang="sass"> <style lang="sass">
.bloodline-page-headline
.cycle-header
.bloodline-page-headline
text-align: center
font-size: 32px
margin-bottom: 32px
.bloodline-page-description
text-align: center
font-size: 16px
.slider-wrapper
display: flex
justify-content: center
font-size: 24px
user-select: none
position: sticky
top: 82px
z-index: 3
background: #2D2D2D
padding: 16px 0
@media (min-width: 992px)
position: unset
.slider-text
margin: 0 24px
margin-top: auto
margin-bottom: auto
.slider-prev, .slider-next
color: var(--purple)
font-size: 40px
cursor: pointer
&:hover,&:active, &:focus
filter: brightness(0.80)
&.disabled
opacity: .35
pointer-events: none
.bloodline-wrapper
padding-top: 24px
border-bottom-left-radius: unset
border-bottom-right-radius: unset
gap: 24px
display: flex
flex-direction: column
text-align: center text-align: center
font-size: 32px
margin-bottom: 32px .cycle-winner
.bloodline-page-description padding: 8px 24px
text-align: center display: flex
font-size: 16px text-align: left
justify-content: space-between
.cycle-winner-left
display: flex
flex-direction: column
justify-content: center
.cycle-winner-headline
font-size: 24px
.cycle-winner-subheadline
font-size: 12px
.cycle-winner-right
.cycle-winner-logo
img
height: 49px
width: 49px
border-radius: 50%
&.inactive
img
opacity: 0.3
.cycle-winner-name
font-size: 16px
</style> </style>
src/views/HomeView.vue
+23 -187
View File
@@ -2,8 +2,7 @@
import { ref, computed, inject, onMounted, onBeforeUnmount } from "vue"; import { ref, computed, inject, onMounted, onBeforeUnmount } from "vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import SacrificeToken from "@/components/SacrificeToken.vue"; import SacrificeToken from "@/components/SacrificeToken.vue";
import BloodChart from "@/components/BloodChart.vue";
import TokenClaim from "@/components/TokenClaim.vue";
// import { useWalletStore } from "@/stores/wallet"; // import { useWalletStore } from "@/stores/wallet";
import { useTokenStore } from "@/stores/tokens"; import { useTokenStore } from "@/stores/tokens";
import { useRoundsStore } from "@/stores/rounds"; import { useRoundsStore } from "@/stores/rounds";
@@ -13,65 +12,9 @@ const { getCurrentRoundData } = storeToRefs(roundsStore);
const { currentRound, activeRound, rounds } = storeToRefs(roundsStore); const { currentRound, activeRound, rounds } = storeToRefs(roundsStore);
const days = ref(null);
const hours = ref(null);
const minutes = ref(null);
const seconds = ref(null);
const openTutorial = ref(false); const openTutorial = ref(false);
const timer = ref(null);
const modules = [Navigation]; const modules = [Navigation];
const isMobile = inject("isMobile"); const isMobile = inject("isMobile");
async function prevSlide() {
if (activeRound.value > 1) {
activeRound.value--;
await roundsStore.fillRound(activeRound.value);
}
}
async function nextSlide() {
if (activeRound.value < currentRound.value) {
activeRound.value++;
await roundsStore.fillRound(activeRound.value);
}
}
onMounted(() => {
console.log("getCurrentRoundData", getCurrentRoundData);
timer.value = setInterval(function () {
timeBetweenDates();
}, 1000);
});
onBeforeUnmount(() => {
clearInterval(timer.value);
});
function timeBetweenDates() {
const dateEntered = new Date(Number(getCurrentRoundData.value?.expirationTimestamp) * 1000);
if (dateEntered) {
var now = new Date();
var difference = dateEntered.getTime() - now.getTime();
if (difference <= 0) {
clearInterval(timer.value);
} else {
var _seconds = Math.floor(difference / 1000);
var _minutes = Math.floor(_seconds / 60);
var _hours = Math.floor(_minutes / 60);
var _days = Math.floor(_hours / 24);
days.value = _days;
hours.value = _hours % 24;
minutes.value = _minutes % 60;
seconds.value = _seconds % 60;
days.value = ("0" + days.value).slice(-2) + "d";
hours.value = ("0" + hours.value).slice(-2) + "h";
minutes.value = ("0" + minutes.value).slice(-2) + "m";
}
}
}
</script> </script>
<template> <template>
@@ -83,92 +26,12 @@ function timeBetweenDates() {
Join the bloodline scheme. Join the bloodline scheme.
</div> </div>
</section> </section>
<section id="sacrifice" class="container"> <section id="sacrifice">
<sacrifice-token :data="tokenStore.sacrificeToken"></sacrifice-token> <sacrifice-token :data="tokenStore.sacrificeToken"></sacrifice-token>
</section> </section>
<div class="container section-header-container"> <section id="cycle-section"></section>
<h3>Cycle</h3> <div class="section-header-container">
Become the most powerful clan each cycle and claim extra rewards.Claim and trade your $BLOOD at each
cycle's end.
</div>
<section id="cycle-section" class="container">
<div class="slider-wrapper">
<font-awesome-icon
:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
@click="prevSlide"
:icon="['fas', 'caret-left']"
/>
<div class="slider-text">Cycle {{ roundsStore.activeRound }}</div>
<font-awesome-icon
:class="{ 'slider-next': true, disabled: currentRound === roundsStore.activeRound }"
@click="nextSlide"
:icon="['fas', 'caret-right']"
/>
</div>
<div class="cycle card bloodline-wrapper">
<div class="bloodline-inner">
<token-claim></token-claim>
</div>
<div class="bloodline-clan">
<h3>Bloodline Clan</h3>
<p>
Win extra rewards for you and your clan. Increase the strength of your bloodline by
sacrificing more memes.
</p>
<table class="bonus-table" v-if="!isMobile">
<tbody>
<tr>
<th scope="row">1st</th>
<td>100% Bonus</td>
</tr>
<tr>
<th scope="row">2nd</th>
<td>50% Bonus</td>
</tr>
<tr>
<th scope="row">3rd</th>
<td>No Bonus</td>
</tr>
</tbody>
</table>
<div class="bloodline-container" v-else>
<div class="bloodline-border purple">
Get up to +100% Clan Bonus <br />on your sacrifice.
</div>
</div>
<div class="blood-chart">
<blood-chart :data="rounds[activeRound]"></blood-chart>
</div>
<div class="cycle-end-wrapper">
<div class="cycle-end-inner">
<h2>Cycle End</h2>
<div class="cycle-end-text">A cycle ends when only one of these goals is reached.</div>
<div class="bloodline-border">
<table>
<tr>
<td>Sacrifice:</td>
<td class="divider"></td>
<!-- <td>{{ getCurrentRoundData?.goalInBLD?.toFixed(2) }} $BDL</td> -->
<td>{{ getCurrentRoundData?.goalInBLD }} $BDL</td>
</tr>
<tr>
<td>Time left:</td>
<td class="divider"></td>
<td v-if="currentRound === roundsStore.activeRound">
{{ days }} {{ hours }} {{ minutes }}
</td>
<td v-else>0</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container section-header-container">
<div class="tutorial-header"> <div class="tutorial-header">
<div class="tutorial-headline">Tutorial</div> <div class="tutorial-headline">Tutorial</div>
<div class="tutorial-more" @click="openTutorial = !openTutorial"> <div class="tutorial-more" @click="openTutorial = !openTutorial">
@@ -176,10 +39,12 @@ function timeBetweenDates() {
<font-awesome-icon v-else icon="chevron-down" /> <font-awesome-icon v-else icon="chevron-down" />
</div> </div>
</div> </div>
<div v-if="openTutorial" class="tutorial-text"> <div v-if="openTutorial" class="tutorial-wrapper">
When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position. <div class="tutorial-text container">
<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade. When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
<section id="tokenomics" class="container"> <br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
</div>
<section id="tokenomics">
<div class="card"> <div class="card">
<h2>Tokenomics</h2> <h2>Tokenomics</h2>
<p>100% clan owned. No team %, no pre-mine</p> <p>100% clan owned. No team %, no pre-mine</p>
@@ -187,7 +52,7 @@ function timeBetweenDates() {
<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" /> <img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
</div> </div>
</section> </section>
<div> <div class="tutorial-footer">
$BLOOD is 100%<br /> $BLOOD is 100%<br />
community owned.<br /> community owned.<br />
No team %, no pre-mine. No team %, no pre-mine.
@@ -243,7 +108,6 @@ function timeBetweenDates() {
padding-right: 16px padding-right: 16px
#tokenomics #tokenomics
background-color: var(--darkgrey) background-color: var(--darkgrey)
padding-bottom: 32px
>div >div
text-align: center text-align: center
img img
@@ -270,38 +134,10 @@ function timeBetweenDates() {
text-align: center text-align: center
padding-top: 10px padding-top: 10px
.slider-wrapper
display: flex
justify-content: center
font-size: 24px
user-select: none
position: sticky
top: 82px
z-index: 3
background: #2D2D2D
padding: 16px 0
@media (min-width: 992px)
position: unset
.slider-text
margin: 0 24px
margin-top: auto
margin-bottom: auto
.slider-prev, .slider-next
color: var(--purple)
font-size: 40px
cursor: pointer
&:hover,&:active, &:focus
filter: brightness(0.80)
&.disabled
opacity: .35
pointer-events: none
.section-header-container .section-header-container
text-align: center margin: 24px 0
font-size: 16px
padding: 0 24px
margin-top: 64px
margin-bottom: 64px
@media (min-width: 992px) @media (min-width: 992px)
width: 655px width: 655px
.tutorial-header .tutorial-header
@@ -309,18 +145,18 @@ function timeBetweenDates() {
justify-content: center justify-content: center
gap: 16px gap: 16px
font-size: 24px font-size: 24px
margin-bottom: 40px margin-bottom: 24px
.tutorial-text .tutorial-wrapper
font-size: 18px display: flex
flex-direction: column
gap: 24px
.tutorial-text
font-size: 18px
text-align: center
.tutorial-footer
text-align: center
.bloodline-wrapper
.bloodline-inner
padding: 4px
@media (min-width: 992px)
padding: 20px
.bloodline-clan
text-align: center
.cycle-end-wrapper .cycle-end-wrapper
.cycle-end-inner .cycle-end-inner
src/views/ProfileView.vue
+31 -6
View File
@@ -2,7 +2,7 @@
<div> <div>
<div class="profile-header">Profile</div> <div class="profile-header">Profile</div>
<div class="profile-subheader"> <div class="profile-subheader">
<div class="profile-subheader-logo"><img src="/assets/img/Icon.png" alt="" /></div> <div class="profile-subheader-logo"><img :src="getblocky(walletStore.address)" alt="" /></div>
<div class="profile-subheader-address">0x12345...812d</div> <div class="profile-subheader-address">0x12345...812d</div>
</div> </div>
<div class="total-rewards-wrapper"> <div class="total-rewards-wrapper">
@@ -27,7 +27,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="most-sacrificed-wrapper"> <stake-component></stake-component>
<div class="most-sacrificed-wrapper" v-if="false">
<div class="most-sacrificed-inner"> <div class="most-sacrificed-inner">
<div class="most-sacrificed-left"> <div class="most-sacrificed-left">
<div class="most-sacrificed-header">Bloodline Clan</div> <div class="most-sacrificed-header">Bloodline Clan</div>
@@ -41,7 +43,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="total-sacrificed-wrapper"> <div class="total-sacrificed-wrapper" v-if="false">
<div class="total-sacrificed-inner"> <div class="total-sacrificed-inner">
<div class="total-sacrificed-header">Total Sacrifice</div> <div class="total-sacrificed-header">Total Sacrifice</div>
<div class="total-sacrificed-coins"> <div class="total-sacrificed-coins">
@@ -85,7 +87,10 @@
<div class="cycle-round-badget" v-if="roundsStore.currentRound === round.round"> <div class="cycle-round-badget" v-if="roundsStore.currentRound === round.round">
active active
</div> </div>
<div class="cycle-round-reward"> <div class="cycle-round-reward" v-if="roundsStore.currentRound === round.round">
todo
</div>
<div class="cycle-round-reward" v-else>
{{ Number(round.rewards_total / BigInt(Math.pow(10, 18))) }} $BDL {{ Number(round.rewards_total / BigInt(Math.pow(10, 18))) }} $BDL
</div> </div>
<div class="cycle-round-more" @click="openRound(index)"> <div class="cycle-round-more" @click="openRound(index)">
@@ -163,9 +168,15 @@
<script setup> <script setup>
import { ref, onMounted, computed } from "vue"; import { ref, onMounted, computed } from "vue";
import { useRoundsStore } from "@/stores/rounds"; import { useRoundsStore } from "@/stores/rounds";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { getblocky } from "@/helper/helper.js";
import StakeComponent from "@/components/StakeComponent.vue";
const roundsStore = useRoundsStore(); const roundsStore = useRoundsStore();
const walletStore = useWalletStoreV2();
const activeRound = ref(null); const activeRound = ref(null);
const openCycleElement = ref(false); const openCycleElement = ref(false);
function openRound(index) { function openRound(index) {
@@ -183,7 +194,17 @@ onMounted(async () => {
console.log("roundsStore.rounds", roundsStore.rounds); console.log("roundsStore.rounds", roundsStore.rounds);
}); });
const rounds = computed(() => roundsStore.rounds.reverse()); const rounds = computed(() =>
roundsStore.rounds
.filter((round) => {
if (round.round) {
return true;
} else {
return false;
}
})
.reverse()
);
</script> </script>
<style lang="sass"> <style lang="sass">
@@ -197,8 +218,12 @@ const rounds = computed(() => roundsStore.rounds.reverse());
justify-content: center justify-content: center
gap: 12px gap: 12px
align-items: center align-items: center
// .profile-subheader-logo
margin-bottom: 24px margin-bottom: 24px
.profile-subheader-logo
img
width: 21px
height: 21px
border-radius: 20%
.profile-subheader-address .profile-subheader-address
font-size: 12px font-size: 12px
.total-rewards-wrapper .total-rewards-wrapper
src/views/TestView.vue
+6 -1
View File
@@ -5,9 +5,10 @@
<button @click="sacrificeMeme">sacrifice Meme</button> <button @click="sacrificeMeme">sacrifice Meme</button>
<button @click="approveMeme1">approve Meme1</button> <button @click="approveMeme1">approve Meme1</button>
<button @click="tokenStore.approveToken(MemeBurnerJson, 10)">wallet approve</button> <button @click="tokenStore.approveToken(MemeBurnerJson, 10)">wallet approve</button>
<button @click="stake">stake</button> <button @click="stake">z</button>
<button @click="">unstake</button> <button @click="">unstake</button>
<button @click="fetchBalance">fetchBalance</button> <button @click="fetchBalance">fetchBalance</button>
<button @click="claimView">claimview</button>
</div> </div>
</template> </template>
@@ -54,6 +55,10 @@ onMounted(async () => {
// ); // );
}); });
async function claimView() {
var resultStake = await rewardLockerStore.contract.read.claim([[0, 1, 2]]);
console.log("resultStake", resultStake);
}
// change this value to make yourself rich quick // change this value to make yourself rich quick
async function mintToken() { async function mintToken() {
try { try {