start implementing frontend design

src/stores/tokens.js

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import Web3 from "web3";
 import { useWalletStore } from "./wallet";
+import { useContractStore } from "./contracts";
 import Meme1Json from "@/assets/contracts/Meme1.json";
 import Meme2Json from "@/assets/contracts/Meme2.json";
 import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
@@ -411,8 +412,9 @@ export const useTokenStore = defineStore("token", {
 			abi: null,
 			balance: null,
             contract: null,
-            allowance: null
+            allowance: null,
 		},
+        loading: false,
         memeBurner: {
             config: MemeBurnerJson,
             contract: null
@@ -440,23 +442,42 @@ export const useTokenStore = defineStore("token", {
         },
         async approveToken(amount) {
 			const walletStore = useWalletStore();
+            this.loading = true;
 			var approve = await this.contract.methods
 				.approve(this.memeBurner.config.contractAddress, amount)
-				.send({ from: walletStore.address });
-			console.log("approve", approve);
-			console.log("this.contract", this.contract);
+                .send({ from: walletStore.address });
+            console.log("approve", approve);
+            this.loading = false;
+            return approve;
 		},
         async sacrificeToken(amount) {
-            console.log("this.activeToken.", this.activeToken.contractAddress);
-			const walletStore = useWalletStore();
-            console.log("walletStore.address", walletStore.address);
-			var reward = await this.memeBurner.contract.methods
-				.sacrificeMeme(this.activeToken.contractAddress, "400000000000000000")
-				.call({ from: walletStore.address });
-            console.log("reward", reward);
-		},
-		getTokenContract(token) {
+            try {
+                this.loading = true;
+				console.log("this.activeToken.", this.activeToken.contractAddress);
+				const walletStore = useWalletStore();
+				console.log("walletStore.address", walletStore.address);
+				var reward = await this.memeBurner.contract.methods
+					.sacrificeMeme(this.activeToken.contractAddress, "400000000000000000")
+					.send({ from: walletStore.address });
+				console.log("reward", reward);
+            } catch (error) {
+                error.log(error);
+
+            } finally {
+                this.loading = false;
+            }
+        },
+        async getRewardsFor(amount) {
+			const contractsStore = useContractStore();
+            var rewards = await contractsStore.list.memeBurnerPublic.methods
+				.getRewardFor(this.activeToken.contractAddress, amount)
+                .call();
+            return rewards
+        },
+        getTokenContract(token) {
+            console.log("token", token);
 			const contractAddress = token.contractAddress;
+            console.log("contractAddress", contractAddress);
 			const activeToken = this.token.find((obj) => obj.contractAddress === contractAddress);
 			console.log("activeToken", activeToken);
 			const web3 = new Web3(window.ethereum);