Add web3 utils class

dapp/src/App.vue

@@ -1,48 +1,26 @@
 <script setup lang="ts">
 import CryptoZombiesView from './components/CryptoZombiesView.vue'
 import { MetaMaskInpageProvider } from "@metamask/providers";
-import Web3 from 'web3'
-import { Contract } from 'web3'
 import { onBeforeMount, ref } from 'vue'
-
-import cryptozombiesABI from './abi/zombieownership.sol/ZombieOwnership.json';
+import Web3Utils from './utils/web3utils.ts';
 
 // Metamask injected
 declare global {
   var ethereum: MetaMaskInpageProvider;
 }
 
-var cryptoZombiesContract: Contract<any>
-const account = ref<string>();
-var web3js: Web3
-
-function initializeApp() {
-  console.log('App is initializing...');
-  ethEnabled()
-}
-
-window.ethereum.on('accountsChanged', () => initializeApp());
-
 onBeforeMount(() => {
   initializeApp();
 });
 
-function ethEnabled() {
-  if (window.ethereum) {
-    console.log("Init Web 3");
-    window.ethereum.request({ method: 'eth_requestAccounts' });
-    web3js = new Web3(ethereum);
-    web3js.eth.getAccounts().then((accounts: string[]) => {
-      account.value = accounts[0];
-      // console.log("account : " + account);
-    })
-    cryptoZombiesContract = new web3js.eth.Contract(cryptozombiesABI.abi, "0x5FbDB2315678afecb367f032d93F642f64180aa3");
-  } else {
-    console.log("no window.ethereum, install Metamask");
-  }
+const web3Interact: any = ref<Web3Utils>(new Web3Utils(window.ethereum));
 
+function initializeApp() {
+  console.log('App is initializing...');
+  web3Interact.value.ethInit();
 }
 
+window.ethereum.on('accountsChanged', () => initializeApp());
 </script>
 
 <template>
@@ -54,7 +32,8 @@ function ethEnabled() {
       </a>
     </h1>
   </div>
-  <CryptoZombiesView v-if="account !== undefined" :owner="account" :cryptoZombiesContract="cryptoZombiesContract" />
+  <CryptoZombiesView v-if="web3Interact.account !== undefined" :owner="web3Interact.account"
+    :cryptoZombiesContract="web3Interact.cryptoZombiesContract" />
 </template>
 
 <style scoped>

dapp/src/components/CryptoZombiesView.vue

@@ -22,7 +22,6 @@ function getZombiesByOwner(owner: string) {
     }
   )
 }
-
 </script>
 
 <template>

dapp/src/tests/web3.test.ts

@@ -0,0 +1,7 @@
+import { expect, test } from 'vitest'
+import Web3Utils from '../utils/web3utils';
+
+test('init without provider', () => {
+    var web3: Web3Utils = new Web3Utils(undefined)
+    expect(web3.ethInit()).toBe(false)
+})

dapp/src/utils/web3utils.ts

@@ -0,0 +1,41 @@
+import { MetaMaskInpageProvider } from "@metamask/providers";
+import Web3 from 'web3'
+import { Contract } from 'web3'
+import cryptozombiesABI from '../abi/zombieownership.sol/ZombieOwnership.json';
+
+class Web3Utils {
+
+    private web3js!: Web3;
+    private ethereum!: MetaMaskInpageProvider;
+    private readonly cryptoZombiesContractAddress: string = "0x5FbDB2315678afecb367f032d93F642f64180aa3";
+    public account!: string;
+    public cryptoZombiesContract!: Contract<any>;
+
+    constructor(ethereum: MetaMaskInpageProvider | undefined) {
+        if (ethereum) {
+            this.ethereum = ethereum
+        }
+        else {
+            console.log("no window.ethereum, install Metamask");
+        }
+    }
+
+    ethInit(): boolean {
+
+        if (this.ethereum == undefined) return false;
+
+        console.log("Init Web 3");
+        this.ethereum.request({ method: 'eth_requestAccounts' });
+        this.web3js = new Web3(this.ethereum);
+        this.web3js.eth.getAccounts().then((accounts: string[]) => {
+            this.account = accounts[0];
+            // console.log("account : " + account);
+        })
+        this.cryptoZombiesContract = new this.web3js.eth.Contract(cryptozombiesABI.abi, this.cryptoZombiesContractAddress);
+
+        return true;
+    }
+
+}
+
+export default Web3Utils;

dapp/vite.config.ts

@@ -5,16 +5,17 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  //root: './',
   plugins: [vue()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
-      web3: './node_modules/web3/dist/web3.min.js',
+      web3: '../../node_modules/web3/dist/web3.min.js',
     },
   },
   test: {
     coverage: {
-      reporter: 'lcov',
+      reporter: ['lcov', 'text'],
     },
     // reporters: ['html', 'json']
   },