From ebfa02f0c8ca96a90b81f2d134acb603ab2bda07 Mon Sep 17 00:00:00 2001
From: Jonathan Le Brun <42697488+icyfry@users.noreply.github.com>
Date: Tue, 30 Jan 2024 14:00:40 +0100
Subject: [PATCH] Add web3 utils class

---
 dapp/src/App.vue                          | 37 +++++---------------
 dapp/src/components/CryptoZombiesView.vue |  1 -
 dapp/src/tests/web3.test.ts               |  7 ++++
 dapp/src/utils/web3utils.ts               | 41 +++++++++++++++++++++++
 dapp/vite.config.ts                       |  5 +--
 5 files changed, 59 insertions(+), 32 deletions(-)
 create mode 100644 dapp/src/tests/web3.test.ts
 create mode 100644 dapp/src/utils/web3utils.ts

diff --git a/dapp/src/App.vue b/dapp/src/App.vue
index e8fd2f8..c58b0dc 100644
--- a/dapp/src/App.vue
+++ b/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>
diff --git a/dapp/src/components/CryptoZombiesView.vue b/dapp/src/components/CryptoZombiesView.vue
index e1c0538..7a37133 100644
--- a/dapp/src/components/CryptoZombiesView.vue
+++ b/dapp/src/components/CryptoZombiesView.vue
@@ -22,7 +22,6 @@ function getZombiesByOwner(owner: string) {
     }
   )
 }
-
 </script>
 
 <template>
diff --git a/dapp/src/tests/web3.test.ts b/dapp/src/tests/web3.test.ts
new file mode 100644
index 0000000..4e511f5
--- /dev/null
+++ b/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)
+})
\ No newline at end of file
diff --git a/dapp/src/utils/web3utils.ts b/dapp/src/utils/web3utils.ts
new file mode 100644
index 0000000..a1cc072
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/dapp/vite.config.ts b/dapp/vite.config.ts
index 575b1f2..caa943d 100644
--- a/dapp/vite.config.ts
+++ b/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']
   },