Added trasnaction confirmation logic and loader/spinner on the UI side.

Closes #59
vexy · Jan 19, 2023 · 331e1ba · 331e1ba
1 parent c7fe15c
commit 331e1ba
Show file tree

Hide file tree

Showing 7 changed files with 219 additions and 80 deletions.
diff --git 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
@@ -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>
diff --git 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
@@ -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
@@ -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>