added function to transfer ownership

app/src/lib/Passport.svelte

@@ -3,12 +3,14 @@
   import PassportForm from "./PassportForm.svelte";
   import PassportLoader from "./PassportLoader.svelte";
   import QRCode from 'qrcode'
+    import TransferOwner from "./TransferOwner.svelte";
 
   export let tokenId;
   export let activeAcc;
   export let contract;
   let edit = false;
   let ownershipHistory = false;
+  let transferDialog = false;
 
   let params = new URL(document.location).searchParams;
   let qrcode = params.get("qrcode") == "true" ? true : false;
@@ -43,6 +45,7 @@
     <button class="outline" on:click={() => {qrcode = true}}>Show QR code</button>
     <button class="outline" on:click={() => {edit = true}}>EDIT</button>
     <button class="outline" on:click={() => {ownershipHistory = true}}>Show Ownership History</button>
+    <button class="outline" on:click={() => {transferDialog = true}}>Change Ownership</button>
   {/if}
 </PassportLoader>
 
@@ -74,6 +77,14 @@
   </div>
 </dialog>
 
+<dialog open={transferDialog}>
+  <div class="container">
+    <button class="outline" on:click={() => {transferDialog = false}}>Close</button>
+    <TransferOwner {contract} {activeAcc} {tokenId}
+      closeForm={() => {transferDialog = false; ownershipHistory = true;}}/>
+  </div>
+</dialog>
+
 <style>
   hr {
     display: block;

app/src/lib/TransferOwner.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { createForm } from "felte";
+
+  export let contract;
+  export let closeForm;
+  export let activeAcc;
+  export let tokenId;
+  let errorMsg = "";
+
+  async function transferOwnership(input) {
+    // we are deliberatly not doing any error handling here as it will be done in the form component
+    if (!activeAcc) {
+      throw "Please connect to a wallet!";
+    }
+    return await contract.methods.updateOwnership(
+      activeAcc, input.owner, tokenId
+    ).send({from: activeAcc});
+  }
+
+  const { form, isSubmitting } = createForm({
+    onSubmit: (values, _) => {
+      console.log(values)
+      errorMsg = "";
+      // TODO: change this to actually checking if values have changed
+      return transferOwnership(values);
+    },
+    onSuccess(response, context) {
+      // Do something with the returned value from `onSubmit`.
+      console.log(response);
+      console.log("on success was called");
+      closeForm();
+    },
+    onError(err, context) {
+      // Do something with the error thrown from `onSubmit`.
+      errorMsg = err;
+    },
+  });
+</script>
+
+<form use:form>
+  <label for="owner">Item name</label>
+  <input type="text" id="owner" name="owner" placeholder="Next owner" />
+
+  <button type="submit" aria-busy={$isSubmitting}>Transfer Ownership</button>
+  {#if errorMsg}<strong class="errorMsg">{errorMsg}</strong>{/if}
+</form>
+
+<style>
+  .errorMsg {
+    color: red;
+  }
+</style>