Add current delegations

multisig-labs · Oct 9, 2023 · d49e50e · d49e50e
1 parent 8dfd0d9
commit d49e50e
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 1 deletion.
diff --git a/public/ggavax.html b/public/ggavax.html
@@ -0,0 +1,67 @@
+{{template "layout" .}} {{define "content"}}
+<div class="masthead mb-3">
+  <div class="container-xxl bd-gutter">
+    <div class="col-md-8 mx-auto text-center mt-5">
+      <h1 class="mb-3 fw-semibold">
+        <span class="d-inline-block blinking">👁</span> Panopticon <span class="d-inline-block blinking">👁</span>
+      </h1>
+    </div>
+  </div>
+</div>
+
+<div class="container w-95 border border-5 rounded pb-3">
+  <h3 class="text-center">
+    ggAVAX <i class="bi bi-info-square" data-bs-toggle="modal" data-bs-target="#infoModal"></i>
+  </h3>
+  <div id="ggavax" class="text-center"><div class="loader">Loading...</div></div>
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="infoModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">ggAVAX Info</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <pre id="infoData"></pre>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .container,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container-xl {
+    max-width: 9140px;
+  }
+</style>
+
+<script type="module">
+  import { DEPLOYMENT } from "/deployments/selected.js";
+  import { ggAVAX } from "/js/ggavax.js";
+  import { ggAVAXDef } from "/js/tabulator.js";
+
+  let GGAVAX;
+
+  async function initData() {
+    GGAVAX = new ggAVAX(DEPLOYMENT);
+    await GGAVAX.fetchCurrentDelegations();
+  }
+
+  await initData();
+
+  const tableCurrentDelegations = new Tabulator("#ggavax", ggAVAXDef);
+
+  GGAVAX.refreshDataLoop(() => {
+    tableCurrentDelegations.updateOrAddData(GGAVAX.currentDelegations);
+  });
+</script>
+{{end}}
diff --git a/public/js/ggavax.js b/public/js/ggavax.js
@@ -0,0 +1,40 @@
+// Etherjs read-only interface to Rialto Orchestrator
+import { formatters, pick } from "/js/utils.js";
+import { DateTime, Interval } from "https://esm.sh/[email protected]";
+
+class ggAVAX {
+  currentDelegations;
+
+  constructor() {}
+
+  async fetchCurrentDelegations() {
+    const timestamp = Math.floor(Date.now() / 1000);
+    const response = await fetch(
+      `https://glacier-api.avax.network/v1/networks/mainnet/blockchains/p-chain/transactions:listStaking?addresses=avax10f8305248c0wsfsdempdtpx7lpkc30vwzl9y9q&txTypes=AddDelegatorTx&startTimestamp=1&endTimestamp=${timestamp}&pageSize=100`,
+      {
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+          "User-Agent": "panopticon.fly.dev",
+        },
+      }
+    ).then((res) => res.json());
+    this.currentDelegations = response.transactions;
+    return this.currentDelegations;
+  }
+
+  refreshDataLoop(fn) {
+    const poll = async () => {
+      await this.fetchCurrentDelegations();
+      fn();
+      setTimeout(poll, 30000);
+    };
+    poll();
+  }
+
+  required() {
+    throw new Error("Missing argument.");
+  }
+}
+
+export { ggAVAX };
diff --git a/public/js/tabulator.js b/public/js/tabulator.js
@@ -42,6 +42,11 @@ function formatDuration(cell, formatterParams, onRendered) {
   return formatters.formatDuration(cell.getValue());
 }
 
+function formatDurationHumanUntil(cell, formatterParams, onRendered) {
+  const timestamp = Math.floor(Date.now() / 1000);
+  return formatters.formatDurationHuman(cell.getValue() - timestamp);
+}
+
 function formatDurationHuman(cell, formatterParams, onRendered) {
   return formatters.formatDurationHuman(cell.getValue());
 }
@@ -50,6 +55,14 @@ function formatSnowtraceLinkIcon(cell, formatterParams, onRendered) {
   return `<a class="mirror" target="_blank" href="${DEPLOYMENT.cExplorerURL}/address/${cell.getValue()}">⎋</a>`;
 }
 
+function formatNodeIdLink(cell, formatterParams, onRendered) {
+  return `<a target="_blank" href='https://avascan.info/staking/validator/${cell.getValue()}'>${cell.getValue()}</a>`;
+}
+
+function formatGlacierAmount(cell, formatterParams, onRendered) {
+  return formatters.formatAvax(cell.getValue()[0].amount);
+}
+
 function formatTxID(cell, formatterParams, onRendered) {
   const tx = cell.getValue();
   // These are zero values converted to CB58
@@ -69,6 +82,25 @@ function formatTxID(cell, formatterParams, onRendered) {
 }
 
 // Definitions for Tabulator tables
+const ggAVAXDef = {
+  data: [], // Filled in later by JS
+  index: "txHash",
+  // height: 600, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
+  layout: "fitColumns", //fit columns to width of table (optional)
+  responsiveLayout: "collapse",
+  responsiveLayoutCollapseStartOpen: false,
+  selectable: true,
+  clipboard: "copy",
+  clipboardCopyRowRange: "selected",
+  columns: [
+    { width: 20, formatter: "responsiveCollapse", headerSort: false },
+    { title: "Node", field: "nodeId", formatter: formatNodeIdLink },
+    { title: "Started", field: "startTimestamp", formatter: formatUnixTime },
+    { title: "Amount", field: "amountStaked", formatter: formatGlacierAmount },
+    { title: "Reward", field: "estimatedReward", formatter: formatAvax },
+    { title: "Period Ends", field: "endTimestamp", formatter: formatDurationHumanUntil },
+  ],
+};
 
 const dashboardDef = {
   data: [], // Filled in later by JS
@@ -491,4 +523,4 @@ const orcDef = {
   ],
 };
 
-export { orcDef, minipoolsDef, stakersDef, dashboardDef, contractsDef };
+export { orcDef, minipoolsDef, stakersDef, dashboardDef, contractsDef, ggAVAXDef };