update responsive design

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, onUnmounted, provide, ref } from "vue";
 import { storeToRefs } from "pinia";
 
 import Web3 from "web3";
@@ -9,10 +9,37 @@ import { useWalletStore } from "@/stores/wallet";
 const walletStore = useWalletStore();
 import { useTokenStore } from "@/stores/tokens";
 import { useContractStore } from "@/stores/contracts";
+import { useMemeburnerStore } from "@/stores/memeburner";
+import { useRewardLockerStore } from "@/stores/rewardlocker";
 const tokenStore = useTokenStore();
 const contractStore = useContractStore();
+const memeBurnerStore = useMemeburnerStore();
+const rewardLockerStore = useRewardLockerStore();
 const { memeBurner } = storeToRefs(tokenStore);
 const { list } = storeToRefs(contractStore);
+const isMobile = ref(false);
+isMobile.value = isMobileFunc();
+
+onMounted(() => {
+	window.addEventListener("resize", handleWindowSizeChange);
+	handleWindowSizeChange();
+});
+onUnmounted(() => {
+	window.removeEventListener("resize", handleWindowSizeChange);
+});
+const handleWindowSizeChange = () => {
+	isMobile.value = isMobileFunc();
+	// your code
+};
+
+function isMobileFunc() {
+	if (screen.width <= 760) {
+		return true;
+	} else {
+		return false;
+	}
+}
+provide("isMobile", isMobile);
 
 onMounted(async () => {
 	var test = await walletStore.isConnected();
@@ -25,11 +52,36 @@ onMounted(async () => {
 		memeBurner.value.config.abi,
 		memeBurner.value.config.contractAddress
 	);
+
+	//Memeburner Contract
+	memeBurnerStore.contract = new web3.eth.Contract(
+		memeBurnerStore.config.abi,
+		memeBurnerStore.config.contractAddress
+	);
+
+	var getGoal = await memeBurnerStore.getGoal(2);
+
+	console.log("getGoal", getGoal);
+	console.log("memeBurnerStore.contract", memeBurnerStore.contract);
 	console.log("list", list.value);
 	const currentRound = await contract.methods.currentRound().call();
 	const rounds = await contract.methods.rounds("0x0e349D42C125acA39ea58024FFC23ED0fE5feE32").call();
 	console.log("currentRound", currentRound);
 	console.log("rounds", rounds);
+
+	rewardLockerStore.contract = new web3.eth.Contract(
+		rewardLockerStore.config.abi,
+		rewardLockerStore.config.contractAddress
+	);
+
+	var lastCompletedRound = await rewardLockerStore.lastCompletedRound();
+	console.log("lastCompletedRound", lastCompletedRound);
+	var getwards = await rewardLockerStore.getRewards(
+		walletStore.address,
+		1,
+		"0x4435ABC578136e2Eca50b5EFf950F17CAF42485b"
+	);
+	console.log("getwards", getwards);
 });
 </script>
 
@@ -38,6 +90,22 @@ onMounted(async () => {
 	<div class="main">
 		<RouterView />
 	</div>
+	<div class="footer">
+		<div class="footer-inner">
+			$BLOOD is 100%<br />
+			community owned.<br />
+			No team %, no pre-mine.
+		</div>
+	</div>
 </template>
 
-<style lang="sass"></style>
+<style lang="sass">
+.footer
+    height: 450px
+    min-height: 450px
+    background-color: var(--grey2)
+    .footer-inner
+        padding: 24px
+        font-size: 24px
+        text-align: center
+</style>