From bfe29285f51e4b8ce1758e13b757d96c8faf3d72 Mon Sep 17 00:00:00 2001
From: conache <C.conache@gmail.com>
Date: Sat, 20 Jul 2024 20:09:37 +0300
Subject: [PATCH] Add input field for checking request status

---
 config/config.js |  84 ++++++++++++++++----------------
 views/index.ejs  | 121 ++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 146 insertions(+), 59 deletions(-)

diff --git a/config/config.js b/config/config.js
index 393dd59..a8f4d74 100644
--- a/config/config.js
+++ b/config/config.js
@@ -3,52 +3,52 @@ import fs from 'fs'
 import { Wallet, utils } from 'ethers';
 
 // const mnemonic_path= './secret/{{.rootValues.alloraAccountSecretName}}'
-const mnemonic = "varioy"
+const mnemonic = "window ..."
 console.log("==================================================================")
-console.log(`faucet mnemonic: ${mnemonic.substring(1, 15)} ...`)
+console.log(`faucet mnemonic: ${mnemonic.substring(0, 15)} ...`)
 
 export default {
 
-    "port": 8000,  // http port
-    "db": {
-        "path": `./faucet.db` // db for frequency checker(WIP)
-    },
-    "project": {
-        "name": "Allora Edgenet", // What ever you want, recommend: chain-id, 
-        "logo": "https://s3.amazonaws.com/assets.allora.network/logo.svg",
-        "deployer": '<a href="https://allora.network">Allora</a>'
-    },
-    blockchains: [
+  "port": 8000,  // http port
+  "db": {
+      "path": `./faucet.db` // db for frequency checker(WIP)
+  },
+  "project": {
+      "name": "Allora testnet-1",
+      "logo": "https://s3.amazonaws.com/assets.allora.network/logo.svg",
+      "deployer": '<a href="https://allora.network">Allora</a>'
+  },
+  blockchains: [
     {
-        name: "edgenet",
-        endpoint: {
-            // make sure that CORS is enabled in rpc section in config.toml
-            // cors_allowed_origins = ["*"]
-            rpc_endpoint: "https://allora-rpc.edgenet.allora.network",
-        },
-        sender: {
-            mnemonic,
-            option: {
-                hdPaths: [stringToPath("m/44'/118'/0'/0/0")],
-                prefix: "allo" // human readable address prefix
-            }
-        },
-        tx: {
-            amount: [
+      name: "allora-testnet-1",
+      endpoint: {
+          // make sure that CORS is enabled in rpc section in config.toml
+          // cors_allowed_origins = ["*"]
+          rpc_endpoint: "https://allora-rpc.testnet-1.testnet.allora.network",
+      },
+      sender: {
+          mnemonic,
+          option: {
+              hdPaths: [stringToPath("m/44'/118'/0'/0/0")],
+              prefix: "allo" // human readable address prefix
+          }
+      },
+      tx: {
+          amount: [
             { denom: "uallo", amount: "1000000000" },
-            ],
-            fee: {
-                amount: [{ denom: "uallo", amount: "500" }],
-                gas: "200000",
-            },
-        },
-        limit: {
-            // how many times each wallet address is allowed in a window(24h)
-            address: 2,
-            // how many times each ip is allowed in a window(24h),
-            // if you use proxy, double check if the req.ip is return client's ip.
-            ip: 20
-        }
+          ],
+          fee: {
+              amount: [{ denom: "uallo", amount: "1000" }],
+              gas: "200000",
+          },
+      },
+      limit: {
+          // how many times each wallet address is allowed in a window(24h)
+          address: 2,
+          // how many times each ip is allowed in a window(24h),
+          // if you use proxy, double check if the req.ip is return client's ip.
+          ip: 20
+      }
     },
-    ]
-}
+  ]
+}
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index 81d502d..a847ee7 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -21,24 +21,38 @@
           </p>
         </div>
         <div class="row g-5">
-          <div class="input-group">
-              <span class="input-group-text">
-                <select v-model="chain" @change="onChange()">
-                  <option v-for="c in conf.blockchains">{{c}}</option>
-                </select>
-              </span>
-              <input id="address" class="form-control" :placeholder="placeholder" v-model="address" name="address">
-              <button type="button" class="btn btn-secondary d-flex flex-row " @click="requestToken(this)">
+          <div class="d-flex flex-column">
+            <div class="input-group">
+                <span class="input-group-text">
+                  <select v-model="chain" @change="onChange()">
+                    <option v-for="c in conf.blockchains">{{c}}</option>
+                  </select>
+                </span>
+                <input id="address" class="form-control" :placeholder="addressPlaceholder" v-model="address" name="address">
+                <button type="button" class="btn btn-secondary d-flex flex-row " @click="requestToken(this)">
+                  <span>
+                    <span id="address-button-loading" class="spinner-border spinner-border-sm mt-1 mr-1" style="display:none" role="status" aria-hidden="true"></span>
+                  </span>
+                <span class="sr-only">Request Token</span>
+                </button>
+            </div>
+            <div id="message" v-html="message"></div>
+          </div>
+
+          <div class="d-flex flex-column" style="margin-top: 200px;">
+            <div class="fs-5 pb-4">Check request status</div>
+            <div class="input-group">
+              <input id="request-id" class="form-control" :placeholder="requestIdPlaceholder" v-model="requestId" name="requestId">
+              <button type="button" class="btn btn-secondary d-flex flex-row " @click="checkRequestStatus(this)">
                 <span>
-                  <span id="button-loading" class="spinner-border spinner-border-sm mt-1 mr-1" style="display:none" role="status" aria-hidden="true"></span>
+                  <span id="request-id-button-loading" class="spinner-border spinner-border-sm mt-1 mr-1" style="display:none" role="status" aria-hidden="true"></span>
                 </span>
-               <span class="sr-only">Request Token</span>
+              <span class="sr-only">Check status</span>
               </button>
+            </div>
+            <div id="reqStatusMessage" v-html="reqStatusMessage"></div>
           </div>
         </div>
-  
-        <div id="message" v-html="message"></div>
-  
       </main>
     
       <footer class="my-5 pt-5 text-muted text-center text-small">
@@ -55,6 +69,7 @@
         data() {
           return {
             message: '',
+            reqStatusMessage: '',
             testnet: 'Ping Testnet',
             logo: 'https://ping.pub/logo.svg',
             deployer: '',
@@ -74,13 +89,20 @@
           });
         },
         computed: {
-          placeholder() {
+          addressPlaceholder() {
             if(this.conf.sample) {
               return `Input an address (e.g.: ${this.conf.sample[this.chain]}) to received tokens`
             } else {
               return 'Input an address to received tokens'
             }
           },
+          requestIdPlaceholder() {
+            if(this.conf.sample) {
+              return `Input a previous faucet request id (e.g.: 08e010b9-bb2d-42...) to check its status`
+            } else {
+              return 'Input your faucet request id'
+            }
+          },
           faucet() {
             return this.conf.sample? this.conf.sample[this.chain] : ''
           }
@@ -96,7 +118,7 @@
             if (this.address) {
               // button state
               obj.disabled = true;
-              document.getElementById("button-loading").style.display = 'block';
+              document.getElementById("address-button-loading").style.display = 'block';
 
               try {
                 const response = await fetch(`/send/${this.chain}/${this.address}`);
@@ -104,7 +126,7 @@
 
                 // button state
                 obj.disabled = false;
-                document.getElementById("button-loading").style.display = 'none';
+                document.getElementById("address-button-loading").style.display = 'none';
                 // show result
                 this.message = `
                 <div class="alert alert-success alert-dismissible show fade mt-2" role="alert">
@@ -122,11 +144,76 @@
               } finally {
                 // button state
                 obj.disabled = false;
-                document.getElementById("button-loading").style.display = 'none';
+                document.getElementById("address-button-loading").style.display = 'none';
               }
             } else {
               this.message = '<span class="text-danger">Address is required</span>';
             }
+          },
+          async checkRequestStatus(obj) {
+            if (this.requestId) {
+              // button state
+              obj.disabled = true;
+              document.getElementById("request-id-button-loading").style.display = 'block';
+
+              try {
+                const response = {status: 200}
+                // await fetch(`/status/${this.requestId}`);
+
+                if (response.status === 404) {
+                  this.reqStatusMessage = `
+                  <div class="alert alert-danger alert-dismissible show fade mt-2" role="alert">
+                    <li>Request ID not found</li>
+                  </div>
+                  `;
+                  return;
+                }
+                
+                // parse response
+                const data = await response.json();
+
+                // failed status
+                if ((!!data.data?.code && data.data.code !== 0) || data.statuses.includes("error") || data.statuses.includes("failed")) {
+                  this.reqStatusMessage = `
+                  <div class="alert alert-danger alert-dismissible show fade mt-2" role="alert">
+                    <li>Status: ${data.messsage || "Request failed, please contact the admin."}</li>
+                  </div>
+                  `;
+                  return;
+                }
+
+                // success status
+                if (data.statuses.includes("success")) {
+                  this.reqStatusMessage = `
+                  <div class="alert alert-success alert-dismissible show fade mt-2" role="alert">
+                    <li>Status: ${data.messsage || "Request processed successfully"}</li>
+                  </div>
+                  `;
+                  return;
+                }
+                
+                // show result
+                this.reqStatusMessage = `
+                <div class="alert alert-warning alert-dismissible show fade mt-2" role="alert">
+                  <li>Status: ${data.messsage || "The request is currently being processed."}</li>
+                </div>
+                `;
+              } catch (e) {
+                console.log(e)
+                // show request failed message
+                this.reqStatusMessage = `
+                  <div class="alert alert-danger alert-dismissible show fade mt-2" role="alert">
+                    <li>Request failed</li>
+                  </div>
+                `; 
+              } finally {
+                // button state
+                obj.disabled = false;
+                document.getElementById("request-id-button-loading").style.display = 'none';
+              }
+            } else {
+              this.reqStatusMessage = '<span class="text-danger">Request ID is required</span>';
+            }
           }
         }
       }).mount('#app')