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

update mobile

Browse Source
This commit is contained in:
Michel Fromme
2023-07-31 14:45:41 +02:00
parent c160b1c836
commit 2555217641
7 changed files with 91 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+35 -16
View File
@@ -18,6 +18,7 @@ import {
watchAccount,
watchNetwork,
watchContractEvent,
watchWalletClient,
getAccount,
getNetwork,
getPublicClient,
@@ -38,6 +39,7 @@ const showPanel = ref(false);
const eventWatch = ref(null);
const netWorkEvent = ref(null);
const memeSacrificedEvent = ref(null);
const clientClientEvent = ref(null);
isMobile.value = isMobileFunc();
onUnmounted(() => {
@@ -45,6 +47,8 @@ onUnmounted(() => {
eventWatch.value();
netWorkEvent.value();
memeSacrificedEvent.value();
clientClientEvent.value();
console.log("unsubscribe");
});
const handleWindowSizeChange = () => {
@@ -64,36 +68,25 @@ function isMobileFunc() {
}
}
provide("isMobile", isMobile);
provide("showPanel", showPanel);
onMounted(async () => {
window.addEventListener("resize", handleWindowSizeChange);
handleWindowSizeChange();
// initContracts
await walletStore.init();
await tokenStore.initV2();
await memeBurnerStore.init();
await rewardLockerStore.init();
await memeBurnerStore.init();
// await multiCallStore.init();
//Memeburner Contract
const account = getAccount();
const network = getNetwork();
console.log("netWork", network);
console.log("account", account);
if (account.address) {
walletStore.address = account.address;
walletStore.connected = true;
var walletClient123 = await getWalletClient();
console.log("walletClient123123123", walletClient123);
}
//init
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);
@@ -111,10 +104,13 @@ onMounted(async () => {
chainObject = chain;
}
var walletClient = await getWalletClient({
account: account.address,
chainId: chainObject.id,
});
walletStore.walletClient = walletClient;
await memeBurnerStore.init();
console.log("hierabc");
await tokenStore.initV2();
} else {
walletStore.address = null;
walletStore.connected = false;
@@ -141,6 +137,29 @@ onMounted(async () => {
await roundsStore.updateCurrentRound(token);
}
);
clientClientEvent.value = watchWalletClient(
{
chainId: network.chain.id,
},
(walletClient) => {
walletStore.walletClient = walletClient;
console.log("wc123", walletClient);
}
);
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);
});
</script>
src/components/Navbar.vue
+4 -5
View File
@@ -7,8 +7,7 @@ const emit = defineEmits(["showPanel"]);
const walletStore = useWalletStoreV2();
const { connected, address } = storeToRefs(walletStore);
const isMobile = inject("isMobile");
const showPanel = ref(false);
const showPanel = inject("showPanel");
const showNavbar = ref(true);
const lastScrollPosition = ref(0);
@@ -67,10 +66,10 @@ onBeforeUnmount(() => {
<div class="navbar-end">
<div v-if="!isMobile">
<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
<div v-if="!address" class="btn btn-immortal" @click="$emit('showPanel', true)">connect</div>
<span v-else @click="$emit('showPanel', true)"> {{ address }}</span>
<div v-if="!address" class="btn btn-immortal" @click="showPanel = true">connect</div>
<span v-else @click="showPanel = true"> {{ address }}</span>
</div>
<div v-else class="hamburger-menu">
<div v-else class="hamburger-menu" @click="showPanel = true">
<font-awesome-icon :icon="['fas', 'bars']" />
</div>
</div>
src/components/SacrificeToken.vue
+7 -5
View File
@@ -86,7 +86,7 @@
</div>
</div>
<div class="sacrifice-buttons-function-wrapper">
<div v-if="connected">
<div v-if="walletStore.connected">
<div
class="btn btn-immortal"
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
@@ -105,7 +105,8 @@
</div>
</div>
<div v-else>
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
<!-- <div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div> -->
<div class="btn btn-immortal" @click="showPanel = true">Connect</div>
</div>
</div>
</div>
@@ -115,15 +116,16 @@
<script setup>
import { ref, defineProps, watch, inject, computed } from "vue";
import { useWalletStore } from "@/stores/wallet";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import { useMemeburnerStore } from "@/stores/memeburner";
import { storeToRefs } from "pinia";
import Helper from "@/utils/helper.js";
const isMobile = inject("isMobile");
const showPanel = inject("showPanel");
const walletStore = useWalletStore();
const { contract, connected } = storeToRefs(walletStore);
const walletStore = useWalletStoreV2();
// const { connected } = storeToRefs(walletStore);
const tokenStore = useTokenStore();
const { activeToken, loading } = storeToRefs(tokenStore);
src/components/SlideoutPanel.vue
+17 -8
View File
@@ -1,5 +1,5 @@
<template>
<div class="slideout-overlay" :class="{'open': props.modelValue}" @click="$emit('update:modelValue', false)">
<div class="slideout-overlay" :class="{'open': props.modelValue}" @click="showPanel = false">
<div :class="{'slideout-wrapper': true, 'open': props.modelValue}" >
<div class="slideout-panel" @click="testClick">
@@ -19,8 +19,6 @@ const props = defineProps({
defineEmits(["update:modelValue"]);
const showPanel = inject("showPanel");
console.log("showPanel.value", showPanel);
const isMobile = inject("isMobile");
function testClick(e) {
e.preventDefault();
@@ -39,20 +37,31 @@ function testClick(e) {
.slideout-wrapper
z-index: 100
height: 100vh
right: 0
position: fixed
display: flex
border: 1px solid rgba(152, 161, 192, 0.24)
box-shadow: rgba(0, 0, 0, 0.24) 12px 16px 24px, rgba(0, 0, 0, 0.24) 12px 8px 12px, rgba(0, 0, 0, 0.32) 4px 4px 8px
transition: margin-right 250ms ease 0s
margin-right: -300px
background-color: #2D2D2D
transition: margin-bottom 250ms ease 0s
width: 100%
margin-bottom: -100vh
bottom: 0
@media (min-width: 992px)
margin-right: -300px
transition: margin-right 250ms ease 0s
width: auto
right: 0
bottom: unset
&.open
margin-right: 0
margin-bottom: -10vh
@media (min-width: 992px)
margin-right: 0
.slideout-panel
width: 300px
width: 100%
height: 100%
padding: 24px
@media (min-width: 992px)
width: 300px
.slideout-icon
cursor: pointer
&:hover, &:active, &:focus
src/stores/memeburner.js
+3 -2
View File
@@ -6,7 +6,7 @@ import { useWalletStore } from "./wallet";
import { useWalletStoreV2 } from "./walletV2";
import { useRoundsStore } from "@/stores/rounds";
import { multicall, getContract, fetchToken, waitForTransaction } from "@wagmi/core";
import { multicall, getContract, fetchToken, waitForTransaction, getWalletClient } from "@wagmi/core";
export const useMemeburnerStore = defineStore("memeburner", {
@@ -94,10 +94,11 @@ export const useMemeburnerStore = defineStore("memeburner", {
//todo error
console.error("amount is 0 or null or undefined");
return;
}
}
this.loading = true;
const amountDecimal = BigInt(amount * Math.pow(10, tokenStore.activeToken.decimals));
console.log("this.contract", this.contract);
console.log("amountDecimal", amountDecimal);
var hash = await this.contract.write
.sacrificeMeme([tokenStore.activeToken.contractAddress, amountDecimal])
console.log("hash", hash);
src/stores/tokens.js
+20 -11
View File
@@ -10,7 +10,7 @@ import Meme1Json from "@/assets/contracts/Meme1.json";
import Meme2Json from "@/assets/contracts/Meme2.json";
import MemeToken from "@/assets/contracts/MemeToken.json";
import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
import { multicall, getContract, fetchToken } from "@wagmi/core";
import { multicall, getContract, fetchToken, getWalletClient, waitForTransaction } from "@wagmi/core";
export const useTokenStore = defineStore("token", {
@@ -68,18 +68,19 @@ export const useTokenStore = defineStore("token", {
},
}),
getters: {},
actions: {
actions: {
async initV2() {
console.log("-----------init token-------------");
const contracts = [];
const walletStore = useWalletStoreV2();
for (let index = 0; index < this.token.length; index++) {
const token = this.token[index];
token.contract = getContract({
token.contract = getContract({
address: token.contractAddress,
abi: token.abi,
WalletClient: walletStore.walletClient || walletStore.publicClient,
});
abi: token.abi,
walletClient: walletStore.walletClient || walletStore.publicClient,
});
console.log("token.contract", token.contract);
contracts.push({...token.contract, functionName: "decimals"})
}
@@ -144,14 +145,22 @@ export const useTokenStore = defineStore("token", {
this.loading = true;
const walletStore = useWalletStore();
const memeBurnerStore = useMemeburnerStore();
var approve = await this.contract.methods
.approve(memeBurnerStore.config.contractAddress, amount)
.send({ from: walletStore.address});
// var approve = await this.contract.methods
// .approve(memeBurnerStore.config.contractAddress, amount)
// .send({ from: walletStore.address});
var approveHash = await this.activeToken.contract.write.approve([
memeBurnerStore.config.contractAddress,
amount,
]);
console.log("approveHash", approvehash);
//todo parameter value übergeben in eth web3.utils.toHex(web3.utils.toWei(amount, 'ether'))
// .send({ from: walletStore.address, value: 0.5 });
this.activeToken.allowance = await this.allowance();
return approve;
// this.activeToken.allowance = await this.allowance();
const data = await waitForTransaction({
hash: approveHash,
});
return data;
} catch (error) {
console.error(error);
} finally {
src/stores/walletV2.js
+5
View File
@@ -12,6 +12,7 @@ import {
disconnect,
InjectedConnector,
watchAccount,
getWalletClient,
} from "@wagmi/core";
import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
@@ -79,6 +80,10 @@ export const useWalletStoreV2 = defineStore("walletV2", {
webSocketPublicClient,
});
this.publicClient = publicClient;
console.log("this.config", this.config);
const walletClient = await getWalletClient();
console.log("walletClient", walletClient);
// await this.isConnected();
// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
// if (this.connected) {