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
src/App.vue
+69 -86
View File
@@ -1,6 +1,7 @@
<script setup>
import { onMounted, onUnmounted, provide, ref } from "vue";
import { storeToRefs } from "pinia";
import { useRoute, useRouter } from "vue-router";
import Navbar from "./components/Navbar.vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
@@ -39,6 +40,9 @@ const netWorkEvent = ref(null);
const memeSacrificedEvent = ref(null);
const clientClientEvent = ref(null);
const router = useRouter();
const route = useRoute();
isMobile.value = isMobileFunc();
onUnmounted(() => {
window.removeEventListener("resize", handleWindowSizeChange);
@@ -65,10 +69,19 @@ function isMobileFunc() {
return false;
}
}
function changeRoute(name) {
console.log("route", route);
console.log("router", router);
router.push({
name: name,
});
}
provide("isMobile", isMobile);
provide("showPanel", showPanel);
onMounted(async () => {
console.log("onmounted");
window.addEventListener("resize", handleWindowSizeChange);
handleWindowSizeChange();
@@ -85,83 +98,6 @@ onMounted(async () => {
// roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
// console.log("roundsStore.currentRound", 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>
@@ -175,7 +111,7 @@ onMounted(async () => {
</div>
<div class="footer">
<div class="footer-inner">
Follow Bloodline
<div class="footer-headline">Follow Bloodline</div>
<!-- $BLOOD is 100%<br />
community owned.<br />
No team %, no pre-mine. -->
@@ -184,36 +120,83 @@ onMounted(async () => {
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" />
</div>
<div class="social-bloodline-badge-text">Discord</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-telegram" />
</div>
<div class="social-bloodline-badge-text">Telegram</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-twitter" />
</div>
<div class="social-bloodline-badge-text">Twitter</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>
<style lang="sass">
.footer
height: 450px
min-height: 450px
background-color: var(--grey2)
height: auto
background-color: var(--midnight-black)
@media (min-width: 992px)
height: 450px
min-height: 450px
.footer-inner
padding: 24px
padding: 16px 0 24px 0
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
&.mobile
&.no-scroll
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>