From 92f5a13eedcf1d6d267fbadf6054bb3bff3dec84 Mon Sep 17 00:00:00 2001
From: Jonathan Le Brun <42697488+icyfry@users.noreply.github.com>
Date: Wed, 3 Apr 2024 15:42:09 +0200
Subject: [PATCH] Cryptozombies update

---
 contracts/script/DeployZombieOwnership.s.sol |  2 -
 dapp/src/App.vue                             |  8 +--
 dapp/src/components/CryptoZombiesView.vue    | 32 ++++-----
 dapp/src/tests/web3.test.ts                  |  4 +-
 dapp/src/utils/web3utils.ts                  | 70 +++++++++++++++++---
 5 files changed, 79 insertions(+), 37 deletions(-)

diff --git a/contracts/script/DeployZombieOwnership.s.sol b/contracts/script/DeployZombieOwnership.s.sol
index 1cfa42d..9b8d1a8 100644
--- a/contracts/script/DeployZombieOwnership.s.sol
+++ b/contracts/script/DeployZombieOwnership.s.sol
@@ -9,10 +9,8 @@ contract DeployZombieOwnership is Script {
 
     function run() public {
         vm.startBroadcast();
-
         ZombieOwnership zombieownership = new ZombieOwnership();
         console.log("ZombieOwnership deployed at address: ", address(zombieownership));
-
         vm.stopBroadcast();
     }
 }
diff --git a/dapp/src/App.vue b/dapp/src/App.vue
index c58b0dc..aa092a2 100644
--- a/dapp/src/App.vue
+++ b/dapp/src/App.vue
@@ -2,7 +2,7 @@
 import CryptoZombiesView from './components/CryptoZombiesView.vue'
 import { MetaMaskInpageProvider } from "@metamask/providers";
 import { onBeforeMount, ref } from 'vue'
-import Web3Utils from './utils/web3utils.ts';
+import { Web3Utils } from './utils/web3utils.ts';
 
 // Metamask injected
 declare global {
@@ -28,12 +28,12 @@ window.ethereum.on('accountsChanged', () => initializeApp());
     <img src="/cryptozombies.png" class="logo" alt="Vite logo" />
     <h1>
       Test Frontend
-      <a href="https://github.com/icyfry/sandbox-cryptozombies-foundry" target="_blank">sandbox-cryptozombies-foundry
+      <a href="https://github.com/icyfry/sandbox-foundry" target="_blank" rel="noopener">sandbox-foundry
       </a>
     </h1>
   </div>
-  <CryptoZombiesView v-if="web3Interact.account !== undefined" :owner="web3Interact.account"
-    :cryptoZombiesContract="web3Interact.cryptoZombiesContract" />
+  <button v-on:click="web3Interact.createRandomZombie('test')">Create a Random Zombie</button>
+  <CryptoZombiesView v-if="web3Interact.account !== undefined" :web3Interact="web3Interact" />
 </template>
 
 <style scoped>
diff --git a/dapp/src/components/CryptoZombiesView.vue b/dapp/src/components/CryptoZombiesView.vue
index 7a37133..2bbbbc5 100644
--- a/dapp/src/components/CryptoZombiesView.vue
+++ b/dapp/src/components/CryptoZombiesView.vue
@@ -1,33 +1,25 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { Contract } from 'web3'
+import { Zombie, Web3Utils } from '../utils/web3utils.ts';
 
-const props = defineProps<{ owner: string, cryptoZombiesContract: Contract<any> }>();
+const props = defineProps<{ web3Interact: Web3Utils }>();
 
-var zombies: string
+var zombies: Zombie[]
 var error: string
 
 onMounted(() => {
-  getZombiesByOwner(props.owner)
+  zombies = props.web3Interact.getZombiesForAccount()
 })
-
-function getZombiesByOwner(owner: string) {
-  props.cryptoZombiesContract.methods.getZombiesByOwner(owner).call().then(
-    function (value: any) {
-      zombies = value;
-    }
-  ).catch(
-    function (reason: any) {
-      error = reason;
-    }
-  )
-}
 </script>
 
 <template>
   <div class="zombieview">
-    <h2>Account : {{ owner }}</h2>
-    {{ zombies }}
+    <h2>Account : {{ props.web3Interact.account }}</h2>
+    <ul>
+      <li v-for="item in zombies">
+        🧟 {{ item.name }} {{ item.dna }}
+      </li>
+    </ul>
   </div>
   <div class="error">
     {{ error }}
@@ -39,6 +31,10 @@ function getZombiesByOwner(owner: string) {
   background-color: #616161;
 }
 
+.zombieview li {
+  list-style-type: none;
+}
+
 .error {
   background-color: #a70000;
 }
diff --git a/dapp/src/tests/web3.test.ts b/dapp/src/tests/web3.test.ts
index 4e511f5..e165578 100644
--- a/dapp/src/tests/web3.test.ts
+++ b/dapp/src/tests/web3.test.ts
@@ -1,7 +1,7 @@
 import { expect, test } from 'vitest'
-import Web3Utils from '../utils/web3utils';
+import { Web3Utils } from '../utils/web3utils';
 
 test('init without provider', () => {
-    var web3: Web3Utils = new Web3Utils(undefined)
+    const 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
index a1cc072..35f5948 100644
--- a/dapp/src/utils/web3utils.ts
+++ b/dapp/src/utils/web3utils.ts
@@ -1,13 +1,12 @@
 import { MetaMaskInpageProvider } from "@metamask/providers";
-import Web3 from 'web3'
-import { Contract } from 'web3'
-import cryptozombiesABI from '../abi/zombieownership.sol/ZombieOwnership.json';
+import Web3, { EventLog, Contract } from 'web3';
+import cryptozombiesABI from '../../abi/zombieownership.sol/ZombieOwnership.json';
 
-class Web3Utils {
+export class Web3Utils {
 
     private web3js!: Web3;
     private ethereum!: MetaMaskInpageProvider;
-    private readonly cryptoZombiesContractAddress: string = "0x5FbDB2315678afecb367f032d93F642f64180aa3";
+    private readonly cryptoZombiesContractAddress: string = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512";
     public account!: string;
     public cryptoZombiesContract!: Contract<any>;
 
@@ -21,21 +20,70 @@ class Web3Utils {
     }
 
     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.account = this.web3js.utils.toChecksumAddress(accounts[0]);
         })
         this.cryptoZombiesContract = new this.web3js.eth.Contract(cryptozombiesABI.abi, this.cryptoZombiesContractAddress);
 
+        this.cryptoZombiesContract.events.NewZombie()
+            .on("data", (event: EventLog) => {
+                let zombie = event.returnValues;
+                console.log("A new zombie was born!", zombie.zombieId, zombie.name, zombie.dna);
+            })
+        //.on("error", console.error);
+
         return true;
     }
 
-}
+    createRandomZombie(name: string) {
+        // Send the tx to our contract:
+        this.cryptoZombiesContract.methods.createRandomZombie(name)
+            .send({ from: this.account })/*.then(() => {
+                console.log("then");
+            })*/
+            .on("receipt", function (receipt: any) {
+                console.log("Successfully created " + name + "! (" + receipt + ")");
+            })
+            .on("error", function (error: any) {
+                console.error(error);
+            });
+    }
 
-export default Web3Utils;
\ No newline at end of file
+    getZombiesForAccount(): Zombie[] {
+        const zombies: Zombie[] = [];
+        console.log("getZombiesByOwner " + this.account);
+        this.cryptoZombiesContract.methods.getZombiesByOwner(this.account).call().then(
+            (value: any) => {
+                console.log(value);
+                value.forEach((id: number) => {
+                    this.cryptoZombiesContract.methods.zombies(id).call().then(
+                        function (zombie: any) {
+                            zombies.push(zombie as Zombie);
+                        })
+                });
+            }
+        ).catch(
+            function (reason: any) {
+                console.error(reason);
+            }
+        )
+        return zombies;
+    }
+
+    zombieToOwner(id: string) {
+        return this.cryptoZombiesContract.methods.zombieToOwner(id).call();
+    }
+
+}
+export interface Zombie {
+    name?: string;
+    dna?: number;
+    level?: number;
+    winCount?: number;
+    lossCount?: number;
+    readyTime?: number;
+}
\ No newline at end of file