(BIDS-2636) added toggle switch, using dataTable

gobitfly · Jan 16, 2024 · 1137da8 · 1137da8
1 parent e553af6
commit 1137da8
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 17 deletions.
diff --git a/cmd/explorer/main.go b/cmd/explorer/main.go
@@ -410,6 +410,7 @@ func main() {
 			router.HandleFunc("/block/{block}", handlers.Eth1Block).Methods("GET")
 			router.HandleFunc("/block/{block}/transactions", handlers.BlockTransactionsData).Methods("GET")
 			router.HandleFunc("/tx/{hash}", handlers.Eth1TransactionTx).Methods("GET")
+			router.HandleFunc("/tx/{hash}/data", handlers.Eth1TransactionTxData).Methods("GET")
 			router.HandleFunc("/mempool", handlers.MempoolView).Methods("GET")
 			router.HandleFunc("/burn", handlers.Burn).Methods("GET")
 			router.HandleFunc("/burn/data", handlers.BurnPageData).Methods("GET")

diff --git a/handlers/eth1tx.go b/handlers/eth1tx.go
@@ -124,3 +124,44 @@ func Eth1TransactionTx(w http.ResponseWriter, r *http.Request) {
 		return // an error has occurred and was processed
 	}
 }
+
+func Eth1TransactionTxData(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+
+	vars := mux.Vars(r)
+	txHashString := vars["hash"]
+	err := json.NewEncoder(w).Encode(getEth1TransactionTxData(txHashString))
+	if err != nil {
+		logger.Errorf("error enconding json response for %v route: %v", r.URL.String(), err)
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+	}
+}
+
+func getEth1TransactionTxData(txhash string) *types.DataTableResponse {
+	tableData := make([][]interface{}, 0, minimumTransactionsPerUpdate)
+
+	txHash, err := hex.DecodeString(strings.ReplaceAll(txhash, "0x", ""))
+	if err != nil {
+		logger.Warnf("error parsing tx hash %v: %v", txhash, err)
+	} else {
+		txData, err := eth1data.GetEth1Transaction(common.BytesToHash(txHash))
+		its := txData.InternalTxns
+		if err != nil {
+			fmt.Println("hello")
+		} else {
+			for _, i := range its {
+				tableData = append(tableData, []interface{}{
+					i.TracePath,
+					i.From,
+					i.To,
+					i.Amount,
+					i.Gas.Limit,
+				})
+			}
+		}
+	}
+
+	return &types.DataTableResponse{
+		Data: tableData,
+	}
+}
diff --git a/static/css/layout/toggle.css b/static/css/layout/toggle.css
@@ -5,6 +5,17 @@
   height: 19.2px;
 }
 
+.advanced-itx-switch {
+  position: relative;
+  display: inline-flex;
+  width: 38.4px;
+  height: 19.2px;
+}
+
+.advanced-itx-switch input {
+  display: none;
+}
+
 .theme-switch {
   height: calc(var(--font-size, 1rem) * 1.2);
   position: absolute;

diff --git a/templates/eth1tx.html b/templates/eth1tx.html
@@ -1,4 +1,7 @@
 {{ define "js" }}
+  <script type="text/javascript" src="/js/datatables.min.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
+
   <script>
     function togglePriceContent(currentPrice, historicPrice) {
       var content = document.getElementById("valuePriceButton")
@@ -16,6 +19,58 @@
     }
 
     activateTabbarSwitcher("eth1tx-tab-content", "eth1TxTabs", "overview")
+
+    const handleTabChange = (url) => {
+      if ($(`#${"eth1tx-tab-content"}`).find(".tab-pane.active")[0] == $("#internal-txnsTabPanel")[0]) {
+        $("#advanced-itx").show()
+      }
+      else {
+        $("#advanced-itx").hide()
+      }
+    }
+
+    window.addEventListener("DOMContentLoaded", function (ev) {
+      window.navigation.addEventListener("navigate", (event) => {
+        if (!event.destination?.url || event.destination.url.split("#")[0] != event.srcElement?.currentEntry?.url?.split("#")[0]) {
+          return
+        }
+        handleTabChange(event.destination?.url)
+      })
+      handleTabChange(window.location.href)
+    })
+
+    function filterItransactions(show) {
+      if (show) {
+        $('#itransactions').DataTable()
+        .column(3)
+        .search("")
+        .draw()
+      } else {
+        regExSearch = '^(?!' + `0 ETH` + '$).*$';
+        $('#itransactions').DataTable()
+        .column(3)
+        .search(regExSearch, true, false)
+        .draw()
+      }
+    }
+
+    $("#advanced-itx-toggle").on("click", async () => {
+      filterItransactions($("#advanced-itx-toggle").is(':checked'))
+    })
+
+    let hash = {{ .Hash }} || 0
+    $(document).ready(function () {
+      var tblOpts = {
+        processing: true,
+        paging: false,
+        ordering: false,
+        searching: true,
+        ajax: dataTableLoader('/tx/' + hash + '/data'),
+        dom: 'lrtip'
+      }
+    $('#itransactions').DataTable(tblOpts)
+    filterItransactions(false)
+    })
   </script>
 {{ end }}
 
@@ -47,6 +102,15 @@ <h1 class="h4 mb-1 mb-md-0">
     {{ with .Data }}
       <div class="card">
         <div class="card-header">
+          <div id="advanced-itx" class="hide mr-20 float-right">
+            <div class="float-right">
+              <span class="text-monospace mr-2">Advanced</span>
+              <label class="advanced-itx-switch float-right" for="advanced-itx-toggle">
+                <input type="checkbox" id="advanced-itx-toggle" />
+                <div class="slider round"></div>
+              </label>
+            </div>
+          </div>
           <ul class="nav nav-tabs card-header-tabs border-bottom-0" id="eth1TxTabs" role="tablist">
             <li class="nav-item">
               <a class="nav-link show active" id="overview-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true"><i class="fas fa-info-circle"></i><span class="tab-text" style="margin-left: 6px;">Overview</span></a>
@@ -399,25 +463,17 @@ <h1 class="h4 mb-1 mb-md-0">
             {{ if .InternalTxns }}
               <div id="internal-txnsTabPanel" class="tab-pane fade" role="tabpanel" aria-labelledby="internal-txns-tab">
                 <div class="table-responsive">
-                  <table class="table table-borderless text-monospace">
+                  <table class="table dataTable no-footer" id="itransactions" role="grid">
                     <thead>
-                      <th>Type Trace Address</th>
-                      <th>From</th>
-                      <th>To</th>
-                      <th>Value</th>
-                      <th>Gas Limit</th>
+                      <tr>
+                        <th>Type Trace Address</th>
+                        <th>From</th>
+                        <th>To</th>
+                        <th>Value</th>
+                        <th>Gas Limit</th>
+                      </tr>
                     </thead>
-                    <tbody>
-                      {{ range $index, $tx := .InternalTxns }}
-                        <tr>
-                          <td>{{ .TracePath }}</td>
-                          <td>{{ .From }}</td>
-                          <td>{{ .To }}</td>
-                          <td>{{ .Amount }}</td>
-                          <td>{{ .Gas.Limit }}</td>
-                        </tr>
-                      {{ end }}
-                    </tbody>
+                    <tbody></tbody>
                   </table>
                 </div>
               </div>