From 331e1ba09c37edacfc39a5a22476d90e56008fba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veljko=20Tekelerovi=C4=87?= <veljko.tekelerovic@gmail.com>
Date: Thu, 19 Jan 2023 20:06:03 +0100
Subject: [PATCH] Added trasnaction confirmation logic and loader/spinner on
 the UI side. Closes #59

---
 frontend/src/lib/Instructions.svelte          |   4 +-
 frontend/src/lib/Loader.svelte                |  73 ++++++++++++
 frontend/src/lib/Utilities.ts                 |  37 ++++--
 frontend/src/routes/+page.svelte              |   3 +-
 frontend/src/routes/newquestion/+page.svelte  |  68 +++++++----
 .../src/routes/questions/[slug]/+page.svelte  | 112 +++++++++++-------
 hardhat.config.ts                             |   2 +-
 7 files changed, 219 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/lib/Loader.svelte

diff --git a/frontend/src/lib/Instructions.svelte b/frontend/src/lib/Instructions.svelte
index 43627e3..a989cdf 100644
--- a/frontend/src/lib/Instructions.svelte
+++ b/frontend/src/lib/Instructions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     async function checkTutorials() {
-        window.open('https://infoport.app/uputstva', '_blank', 'noreferrer');
+        window.open('https://youtu.be/pff3fzqF6v0', '_blank', 'noreferrer');
     }
 </script>
 
@@ -9,7 +9,7 @@
     <button class="instructions" on:click={checkTutorials}>
         Упутства за приступање
     </button>
-    <p>За више детаља, погледајте упутства за приступање платформи.</p>
+    <p>За више детаља, погледајте видео упутства за приступање платформи...</p>
 </container>
 
 <style>
diff --git a/frontend/src/lib/Loader.svelte b/frontend/src/lib/Loader.svelte
new file mode 100644
index 0000000..542d3ff
--- /dev/null
+++ b/frontend/src/lib/Loader.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    export let message = "";
+</script>
+
+<container>
+    <loader />
+    <i>{message}</i>
+</container>
+
+<style>
+    container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+
+    loader {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      display: inline-block;
+      position: relative;
+      border: 3px solid;
+      border-color: transparent #64b3f4 transparent #c2e59c;
+      box-sizing: border-box;
+      animation: rotation 1s linear infinite;
+    }
+    loader::after,
+    loader::before {
+      content: '';  
+      box-sizing: border-box;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      border: 3px solid;
+      border-color: #64b3f4 transparent transparent transparent;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      box-sizing: border-box;
+      animation: rotationBack 0.5s linear infinite;
+      transform-origin: center center;
+    }
+    loader::before {
+      width: 32px;
+      height: 32px;
+      border-color: #FFF #FFF transparent transparent;
+      animation: rotation 1.5s linear infinite;
+    }
+    
+    @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    } 
+    @keyframes rotationBack {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(-360deg);
+      }
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/lib/Utilities.ts b/frontend/src/lib/Utilities.ts
index ef6f0f2..ca325a7 100644
--- a/frontend/src/lib/Utilities.ts
+++ b/frontend/src/lib/Utilities.ts
@@ -72,7 +72,6 @@ class PlatformContract {
         try {
             this.platformContract = Provider.fabricateContract();
             await this.platformContract.register();
-            console.log("New user registered, informing store.");
             // update the store on the fly
             PlatformStore.registered(true);
             return Promise.resolve(true);
@@ -88,8 +87,15 @@ class PlatformContract {
     async addNewQuestion(questionTitle: string, labels: string[]): Promise<boolean> {
         try {
             this.platformContract = Provider.fabricateContract();
-            await this.platformContract.addQuestion(questionTitle, labels);
-            return Promise.resolve(true);
+            const addQResponse = await this.platformContract.addQuestion(questionTitle, labels);
+
+            // await for response receipt and examine confirmations
+            const receipt = await addQResponse.wait()
+            // console.log(receipt);
+            if(receipt.status === 1) {  // check if we're successfull
+                // console.log("Question added, hash: ", receipt.transactionHash);
+                return Promise.resolve(true);
+            } // otherwise, fallthrough and reject
         } catch (err) {
             console.log("Creating new question errored. Reason:");
             console.log(err);
@@ -104,9 +110,9 @@ class PlatformContract {
         try {
             this.platformContract = Provider.fabricateContract();
             const qInfoArray = await this.platformContract.getAllQuestions();
-            // console.log(qInfoArray);
-            // const questionInfoArray = response[0];
+            //
             for(const qInfo of qInfoArray) {
+                // construct new questioninfo objects
                 returnSet.push(new QuestionInfoOutput(
                     qInfo.id,
                     qInfo.question,
@@ -142,9 +148,14 @@ class PlatformContract {
     async vote(questionID: number, score: number): Promise<boolean> {
         try {
             this.platformContract = Provider.fabricateContract();
-            await this.platformContract.vote(questionID, score);
-            console.log(`Successfull vote for ${questionID}, score: ${score}`);
-            return Promise.resolve(true);
+            const voteResult = await this.platformContract.vote(questionID, score);
+            //
+            //wait for confirmations
+            const receipt = await voteResult.wait();
+            if(receipt.status === 1) {
+                console.log("Vote successfull. Receipt hash: ", receipt.transactionHash);
+                return Promise.resolve(true);
+            }
         } catch (e) {
             console.log("Error occured: ", e.reason);
         }
@@ -155,8 +166,14 @@ class PlatformContract {
     async provideExtra(questionID: number, extraScore: number): Promise<boolean> {
         try {
             this.platformContract = Provider.fabricateContract();
-            await this.platformContract.voteExtra(questionID, extraScore);
-            return Promise.resolve(true);
+            const voteResult = await this.platformContract.voteExtra(questionID, extraScore);
+
+            // wait for confirmations
+            const receipt = await voteResult.wait();
+            if(receipt.status === 1) {
+                console.log("Vote successfull. Receipt hash: ", receipt.transactionHash);
+                return Promise.resolve(true);
+            }
         } catch (e) {
             console.log("Error during providing extra options");
         }
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 53dac31..06a5898 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -52,6 +52,7 @@
             {#await Contract.isRegisteredUser() then success }
                 {#if success}
                     <button class="gradient-button" on:click={() => goto("/list")}>Погледај листу питања 🔍</button>
+                    <p>Број постављених питања: {$PlatformStore.totalQuestions}</p>
                 {:else}
                     <button class="gradient-button" on:click={performRegistration}>
                         Хоћу и ја ✌️
@@ -82,10 +83,10 @@
         align-self: center;
         text-align: center;
         gap: 5px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }
 
     h1 {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         color: #185a9d;
     }
 
diff --git a/frontend/src/routes/newquestion/+page.svelte b/frontend/src/routes/newquestion/+page.svelte
index bf3c7fa..98bd351 100644
--- a/frontend/src/routes/newquestion/+page.svelte
+++ b/frontend/src/routes/newquestion/+page.svelte
@@ -1,23 +1,32 @@
 <script lang="ts">
-    // import Modal from "$lib/ModalDialog.svelte";
+    import Loader from "$lib/Loader.svelte";
     import Contract from "$lib/Utilities";
     import { goto } from "$app/navigation";
 
+    // loading flag...
+    let isLoading = false;
+
     let title: string = "";
     let labels: string[] = [];
 
-    function saveQuestion() {
+    async function saveQuestion() {
       // check inputs
       if (userInputsAreFine()) {
-        Contract.addNewQuestion(title, labels).then( (result: boolean) => {
-          if (result) {
+        try {
+          isLoading = true;
+          const success = await Contract.addNewQuestion(title, labels);
+
+          if(success) {
             alert("Ново питање успешно сачувано !");
             title = "";
             labels = [];
-          } else {
-            alert("Дошло је до грешке приликом чувања. Покушајте поново.");
           }
-        });
+        } catch (err) {
+          alert("Дошло је до грешке приликом чувања. Покушајте поново.");
+        }
+
+        // in any case, as a last step, stop the loader
+        isLoading = false;
       } else {
         alert("Питање мора садржати наслов и барем 2 понуђена одговора.");
       }
@@ -35,11 +44,12 @@
     }
 </script>
 
-<button on:click={() => goto("/list")} >Nazad</button>
+<centered>
+  <button class="save-button" on:click={() => goto('/list')}>Назад</button>
+</centered>
 <h1>Поставите Ваше питање</h1>
 
-<title-inputs>
-    <!-- <label for="title">Naslov pitanja</label> -->
+<new-question-frame>
     <input 
     bind:value={title}
     type="text"
@@ -113,21 +123,31 @@
         required
         >
     </div>
-    <button class="save-button" on:click={saveQuestion}>Сачувај</button>
+</new-question-frame>
 
-    <!-- <Modal>
-        <div slot="trigger" let:open>
-        <button on:click={saveQuestion} class="sky-button">Сачувај</button>
-        </div>
-    </Modal> -->
-</title-inputs>
+<centered>
+  {#if isLoading}
+    <Loader message="Комуникација са blockchain мрежом..."/>
+  {:else}
+    <button class="save-button" on:click={saveQuestion}>Сачувај</button>
+  {/if}
+</centered>
 
 <style>
-    title-inputs {
-        display: flex;
-        flex-direction:  column;
-        gap: 12.5px;
-        justify-content: space-around;
+    centered {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      padding: 5px;
+    }
+
+    new-question-frame {
+      display: flex;
+      flex-direction:  column;
+      gap: 12.5px;
+      justify-content: space-around;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }
 
     .title-input {
@@ -138,6 +158,7 @@
       margin-bottom: 25px;
       border: 1px solid #eee;
       font-size: medium;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }
 
     .label-input {
@@ -148,6 +169,7 @@
       border-bottom: 1px solid;
       box-shadow: 0 0 15px 4px rgba(0,0,0,0.06);
       background-color: inherit;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }
 
     .save-button {
@@ -176,5 +198,5 @@
     .save-button:active {
       box-shadow: 0 0 #4433ff;
       top: 5px;
-    }
+    }    
 </style>
\ No newline at end of file
diff --git a/frontend/src/routes/questions/[slug]/+page.svelte b/frontend/src/routes/questions/[slug]/+page.svelte
index 6f73609..b28aa55 100644
--- a/frontend/src/routes/questions/[slug]/+page.svelte
+++ b/frontend/src/routes/questions/[slug]/+page.svelte
@@ -1,15 +1,24 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { page } from "$app/stores";
+    import { goto } from '$app/navigation';
+    import { PlatformStore } from '$lib/UtilsStore';
+    import Loader from '$lib/Loader.svelte';
     import Contract from '$lib/Utilities';
     import { QuestionInfoOutput, QuestionMeta } from '$lib/Models';
 
+    // loading flag...
+    let isLoading = false;
+
     let questionInfo: QuestionInfoOutput = new QuestionInfoOutput(0, new QuestionMeta("", "", [], [], []) , 0, false);
     let voteOptions: number[] = [0,1,2,3,4];
 
     let meterValues: number[] = [];
     let extrasMeterValues: number[] = [];
 
+    // percentage of total amount of users who voted on this questions
+    $: totalVotePercentage = ((questionInfo.totalVoters / $PlatformStore.totalUsers) * 100).toFixed(1);
+
     onMount(async () => {
         const questionID = Number($page.params.slug);
         questionInfo = await Contract.getQuestionInfo(questionID);
@@ -27,31 +36,41 @@
     });
 
     async function performVote() {
-        // check which user option is selected
+        isLoading = true;
+
+        // find which user option is selected
         const optionButtons = document.getElementsByName('voting-options');
         for(let i = 0; i < optionButtons.length; i++) {
             if(optionButtons[i].checked) {
                 const optionValue = optionButtons[i].value;
 
-                // check the meta of option button selected
-                if (optionValue >= 0) {
-                    await Contract.vote(questionInfo.id, i)
-                        .then(() => {
+                try {
+                    // check if the button meta option is regular vote option
+                    // or extras option (negative value)
+                    if (optionValue >= 0) {
+                        const success = await Contract.vote(questionInfo.id, i);
+                        if(success) {
                             alert("Ваш одговор је примљен. Хвала !");
-                        })
-                        .catch(() => {
-                            console.log("Error...");
-                            alert("Дошло је до грешке, покушајте поново.");
-                        });
-                } else { // contains extras option
-                    const transformedExtraOption = (optionValue * -1) - 1;
-                    //extra option is transformed to suite platform contract extra options [0,1,2]
-                    await Contract.provideExtra(questionInfo.id, transformedExtraOption);
+
+                            // automatically forward us to the results page
+                            const redirect = "/questions/" + $page.params.slug;
+                            await goto(redirect);
+                        }
+                    } else {
+                        //extra option is transformed to suite platform contract extra options [0,1,2]
+                        const transformedExtraOption = (optionValue * -1) - 1;
+                        await Contract.provideExtra(questionInfo.id, transformedExtraOption);
+                    }
+                } catch (err) {
+                    console.log("Vote/report process failed. Reason: ", err);
+                    alert("Дошло је до грешке, покушајте поново.");
                 }
 
                 break;  //no need to cycle further
             }
         }
+
+        isLoading = false;
     }
 </script>
 
@@ -104,23 +123,26 @@
         {/if}
     </vstack>
 </vote-panel>
-<vstack>
-    <vstack-centered>
+
+<centered>
+    {#if isLoading}
+        <Loader message="Слање одговора у току..." />
+    {:else}
         {#if questionInfo.hasVoted}
-            <code>Укупно гласова: {questionInfo.totalVoters}</code>
+            <p>Укупно гласова: {questionInfo.totalVoters} (<i>{totalVotePercentage}%</i> корисникa платформе)</p>
         {:else}
             <button class="vote-button" on:click={performVote}>Пошаљи</button>
         {/if}
-    </vstack-centered>
-</vstack>
+
+        <button class="vote-button" on:click={() => { goto('/list') }}>Назад</button>
+    {/if}
+</centered>
 
 <style>
     vote-panel {
         display: flex;
         flex-direction: row;
         justify-content: space-around;
-        /* background-color: blueviolet; */
-
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }
 
@@ -130,9 +152,13 @@
         gap: 10px;
     }
 
-    vstack-centered {
-        align-self: center;
-        margin-top: 10px;
+    centered {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      padding: 5px;
+      word-wrap: break-word;
     }
 
     hstack {
@@ -149,30 +175,30 @@
     }
 
     .vote-button {
-      margin-top: 15px;
-      min-width: 130px;
-      height: 40px;
-      color: #fff;
-      padding: 5px 10px;
-      font-weight: bold;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      position: relative;
-      display: inline-block;
-      outline: none;
-      border-radius: 5px;
-      border: none;
-      background: #3a86ff;
-      box-shadow: 0 5px #4433ff;
+        margin-top: 15px;
+        min-width: 130px;
+        height: 40px;
+        color: #fff;
+        padding: 5px 10px;
+        font-weight: bold;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        position: relative;
+        display: inline-block;
+        outline: none;
+        border-radius: 5px;
+        border: none;
+        background: #3a86ff;
+        box-shadow: 0 5px #4433ff;
     }
 
     .vote-button:hover {
-      box-shadow: 0 3px #4433ff;
-      top: 1px;
+        box-shadow: 0 3px #4433ff;
+        top: 1px;
     }
     
     .vote-button:active {
-      box-shadow: 0 0 #4433ff;
-      top: 5px;
+        box-shadow: 0 0 #4433ff;
+        top: 5px;
     }
 </style>
\ No newline at end of file
diff --git a/hardhat.config.ts b/hardhat.config.ts
index 637d4fd..c149522 100644
--- a/hardhat.config.ts
+++ b/hardhat.config.ts
@@ -19,7 +19,7 @@ const config: HardhatUserConfig = {
       }
     }
   },
-  defaultNetwork: "matic", //used for testing
+  defaultNetwork: "hardhat", //used for testing
   networks: {
     hardhat: {},
     polygon_mumbai: {