feat: add pending transaction

package.json

@@ -17,6 +17,7 @@
     "ethers": "^5.7.2",
     "ipfs-core": "^0.18.0",
     "jszip": "^3.10.1",
+    "mitt": "^3.0.0",
     "notyf": "^3.10.0",
     "pinia": "^2.0.0-rc.6",
     "uuid": "^9.0.0",

src/App.vue

@@ -17,6 +17,7 @@ import ReloadPrompt from "@src/components/ReloadPrompt.vue";
 import Footer from "./components/Footer.vue";
 import { Notyf } from "notyf";
 import { provide } from "vue";
+import mitt from "mitt";
 
 export default {
   name: "App",
@@ -45,6 +46,7 @@ export default {
       ]
     })
     provide("notyf", NotfyProvider);
+    provide("emitter", mitt());
   }
 }
 </script>

src/components/AppHeader.vue

@@ -15,34 +15,45 @@
           <i-mdi-brightness-4 v-else class="icon-color" @click="toggleTheme" />
         </i>
       </nav>
-      <ConnectWalletButton :address="address" :dark="isDark" @click="handleConnect">
+      <ConnectWalletButton :address="address" :dark="isDark" @click="handleConnect" :txn-count="txnCount">
         Connect
       </ConnectWalletButton>
     </div>
   </header>
 </template>
 
 <script lang="ts">
-import { ref } from "vue";
-import { ConnectWalletButton } from "vue-connect-wallet";
-import { useMetaMaskWallet } from "vue-connect-wallet";
+import { ref, inject } from "vue";
+import { ConnectWalletButton, useMetaMaskWallet } from "vue-connect-wallet";
 import { useWallet } from "@src/store/index";
 import { useRouter } from "vue-router";
+import { Emitter, EventType } from "mitt";
 import "vue-connect-wallet/dist/style.css";
 
 export default {
   name: "AppHeader",
   setup() {
     const isDarkClassAvailable = document.body.classList.contains("dark-theme");
-
     const isDark = ref(isDarkClassAvailable);
+    const txnCount = ref(0);
+    const emitter = inject("emitter") as Emitter<Record<EventType, unknown>>;
+
+    emitter.on("send_txn", (tx) => {
+      txnCount.value += 1;
+    })
+
+    emitter.on("end_txn", () => {
+      txnCount.value -= 1;
+    })
+
     const toggleTheme = () => {
       document.body.classList.toggle("dark-theme");
 
       requestAnimationFrame(toggleAnimation);
 
       isDark.value = !isDark.value;
     }
+
     const toggleAnimation = () => {
       const element: HTMLElement | null = document.querySelector(
         "section#content .main"
@@ -96,6 +107,7 @@ export default {
     };
 
     return {
+      txnCount,
       isDark,
       toggleTheme,
       handleConnect,

src/components/VUpload/PanelUpload.vue

@@ -45,11 +45,14 @@ import { ethers } from "ethers"
 import { PromiseOrValue } from "@src/types/common";
 import { Notyf } from "notyf";
 import { v4 as uuidv4 } from 'uuid';
+import { Emitter, EventType } from "mitt";
+
 
 export default {
   name: "PanelUpload",
   setup() {
     const notyf = inject("notyf") as Notyf;
+    const emitter = inject("emitter") as Emitter<Record<EventType, unknown>>;
     const fileRef = ref<HTMLInputElement | null>(null);
     const isDragged = ref(false);
     const finished = ref(0);
@@ -60,7 +63,6 @@ export default {
     const store = useStore();
     const walletStore = useWallet();
 
-
     const processDirectory = async (item: FileSystemDirectoryEntry, files: File[]) => {
       const entries = await new Promise<FileSystemEntry[]>((resolve) => item.createReader().readEntries(resolve));
 
@@ -76,7 +78,6 @@ export default {
       }
     };
 
-
     const onDropHandler = async ($event: DragEvent) => {
       if (isUploading.value) return false;
 
@@ -109,7 +110,6 @@ export default {
       onFileChangedHandler();
     };
 
-
     const openSelectFile = () => {
       if (isUploading.value) return false;
       if (fileRef.value) {
@@ -134,7 +134,11 @@ export default {
       const signer = provider.getSigner();
       const expiration = Math.floor(Date.now() / 1000) + 60 * 60 * 24;
       const sharex = Sharex__factory.connect(walletStore.address, signer).attach("0x3FD611658eE18cC8aa91De4CD5E86FE2a9484309")
-      return sharex.uploadFile(hash, secret, expiration).then(async (tx) => await tx.wait())
+
+      return sharex.uploadFile(hash, secret, expiration).then(async (tx) => {
+        emitter.emit("send_txn");
+        await tx.wait();
+      })
     }
 
     const uploadFileHandler = async (file: File) => {
@@ -153,6 +157,8 @@ export default {
         } catch (err) {
           console.error(err)
           result.error = err as Error;
+        } finally {
+          emitter.emit("end_txn")
         }
       }
       const { error } = result;

yarn.lock

@@ -5252,6 +5252,11 @@ minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+mitt@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
+  integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
+
 mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"