Show only active mps, improve ggavax page

multisig-labs · Dec 5, 2023 · 4dc77c2 · 4dc77c2
1 parent d7ab286
commit 4dc77c2
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 44 deletions.
diff --git a/public/ggavax.html b/public/ggavax.html
@@ -10,28 +10,13 @@ <h1 class="mb-3 fw-semibold">
 </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>
+  <h3 class="text-center">ggAVAX Delegations</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>
+<br />
+<div class="container w-95 border border-5 rounded pb-3">
+  <h3 class="text-center">ggAVAX Stats</h3>
+  <div id="ggavax-stats" class="text-center"><div class="loader">Loading...</div></div>
 </div>
 
 <style>
@@ -46,14 +31,16 @@ <h5 class="modal-title" id="exampleModalLabel">ggAVAX Info</h5>
 
 <script type="module">
   import { DEPLOYMENT } from "/deployments/selected.js";
+  import { GoGoPool } from "/js/gogopool.js";
   import { ggAVAX } from "/js/ggavax.js";
-  import { ggAVAXDef } from "/js/tabulator.js";
-
-  let GGAVAX;
+  import { ggAVAXDef, ggAVAXStatsDef } from "/js/tabulator.js";
+  let GGAVAX, GGP;
 
   async function initData() {
+    GGP = new GoGoPool(DEPLOYMENT);
     GGAVAX = new ggAVAX(DEPLOYMENT);
-    await GGAVAX.fetchCurrentDelegations();
+    await GGP.fetchContracts();
+    await Promise.all([GGP.fetchDashboardData(), GGAVAX.fetchCurrentDelegations()]);
   }
 
   await initData();
@@ -63,5 +50,13 @@ <h5 class="modal-title" id="exampleModalLabel">ggAVAX Info</h5>
   GGAVAX.refreshDataLoop(() => {
     tableCurrentDelegations.updateOrAddData(GGAVAX.currentDelegations);
   });
+
+  const tableStats = new Tabulator("#ggavax-stats", ggAVAXStatsDef);
+
+  GGP.refreshDataLoop(() => {
+    // Reusing the GGP data, but just grabbing what we want for this page
+    const data = GGP.dashboardAsTabulatorData().filter((obj) => obj.contract === "TokenggAVAX");
+    tableStats.updateOrAddData(data);
+  });
 </script>
 {{end}}
diff --git a/public/home.html b/public/home.html
@@ -24,7 +24,8 @@ <h1 class="mb-1 fw-semibold">
     <input id="filter-value" type="text" placeholder="filter node/owner" />
     <button id="filter-clear">X</button>
   </div>
-  <h3 class="text-center">Minipools</h3>
+  <h3 class="d-inline-block text-center"><a href="/home">Minipools</a></h3>
+  <a href="?status=3,4,5,6" class="d-inline-block">(finished)</a>
   <div id="minipools"><div class="loader">Loading...</div></div>
 </div>
 
@@ -66,7 +67,6 @@ <h3 class="text-center">Contracts</h3>
       BC.fetchData(),
       GGP.fetchContracts(),
       GGP.fetchDashboardData(),
-      // GGP.fetchMinipools({ status: [1, 2, 3] }),
       GGP.fetchMinipools(),
       GGP.fetchStakers(),
     ]);

diff --git a/public/js/ggavax.js b/public/js/ggavax.js
@@ -1,7 +1,3 @@
-// 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;
 

diff --git a/public/js/gogopool.js b/public/js/gogopool.js
@@ -45,6 +45,7 @@ class GoGoPool {
   dashboardData;
   stakersData;
   isLoaded;
+  statusesToFetch;
 
   // Deconstruct params from a DEPLOYMENT descriptor
   constructor({
@@ -71,6 +72,7 @@ class GoGoPool {
     this.dashboardData = [];
     this.stakersData = [];
     this.isLoaded = false;
+    this.statusesToFetch = undefined;
   }
 
   // @return [{name: "Contract1", address: "0x123"}]
@@ -97,13 +99,35 @@ class GoGoPool {
     this.contracts.Storage.contract = await new Contract(this.storage, this.contracts.Storage.abi, this.provider);
     this.contracts.Storage.mccontract = await new MCContract(this.storage, this.contracts.Storage.abi);
 
-    // Loop through all other contract names we have abis for
-    for (const name of Object.keys(this.contracts)) {
-      if (name === "Storage") continue;
+    // Use multicall to Storage to get addrs in one swoop
+
+    const contractNames = Object.keys(this.contracts).filter((n) => n !== "Storage");
+    const getAddrCalls = [];
+
+    for (const name of contractNames) {
+      const args = ethersUtils.solidityKeccak256(["string", "string"], ["contract.address", name]);
+      getAddrCalls.push(this.contracts.Storage.mccontract["getAddress"].call(this, args));
+    }
+
+    let results = [];
+
+    for (let batch of this.getBatch(getAddrCalls)) {
       try {
-        const addr = await this.contracts.Storage.contract.getAddress(
-          ethersUtils.solidityKeccak256(["string", "string"], ["contract.address", name])
+        results = results.concat(await this.multicallProvider.tryAll(batch));
+      } catch (err) {
+        console.error(
+          "ERROR in Multicall, so we dont know which call failed. Make sure Multicall3 addr is correct and check the /deployments descriptor.",
+          err
         );
+        console.error(batch);
+      }
+    }
+
+    // Loop through all other contract names we have abis for
+    for (let i = 0; i < contractNames.length; i++) {
+      try {
+        const name = contractNames[i];
+        const addr = results[i];
 
         if (addr == constants.AddressZero) {
           console.log(`${name} not found in Storage`);
@@ -210,10 +234,16 @@ class GoGoPool {
     return this.dashboardData;
   }
 
-  async fetchMinipools({ status } = { status: Object.keys(MINIPOOL_STATUS_MAP) }) {
+  async fetchMinipools() {
+    const params = new URLSearchParams(document.location.search);
+    if (params.get("status")) {
+      this.statusesToFetch = params.get("status").split(",");
+    } else {
+      this.statusesToFetch = [0, 1, 2];
+    }
     await this.until((_) => this.isLoaded);
 
-    const promises = status.map((s) => this.contracts.MinipoolManager.contract.getMinipools(s, 0, 0));
+    const promises = this.statusesToFetch.map((s) => this.contracts.MinipoolManager.contract.getMinipools(s, 0, 0));
     const results = await Promise.all(promises);
     this.minipoolsData = await minipoolTransformer(results.flat());
     console.log("Minipools", this.minipoolsData);
@@ -282,7 +312,6 @@ class GoGoPool {
     // Convert BigNums to numbers (taking into account AVAX/GGP which are in Wei)
     eligibleStakers = eligibleStakers.map(bigToNumber);
     console.log("eligibleStakers", eligibleStakers);
-    // return;
 
     // REWARDS CALCULATIONS
     // Should probably extract this to a generic JS class for reuse
@@ -328,10 +357,7 @@ class GoGoPool {
   // Helpers
   refreshDataLoop(fn) {
     const poll = async () => {
-      // console.log("Polling for data");
-      await this.fetchDashboardData();
-      await this.fetchMinipools();
-      await this.fetchStakers();
+      await Promise.all([this.fetchDashboardData(), this.fetchMinipools(), this.fetchStakers()]);
       fn();
       setTimeout(poll, window.POLL_INTERVAL || 60 * 1000);
     };

diff --git a/public/js/tabulator.js b/public/js/tabulator.js
@@ -88,7 +88,7 @@ function formatTxID(cell, formatterParams, onRendered) {
 // Definitions for Tabulator tables
 const ggAVAXDef = {
   data: [], // Filled in later by JS
-  index: "txHash",
+  index: "nodeId",
   // 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",
@@ -106,6 +106,24 @@ const ggAVAXDef = {
   ],
 };
 
+const ggAVAXStatsDef = {
+  data: [], // Filled in later by JS
+  index: "title",
+  // 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: "Variable", field: "title", width: 300 },
+    { title: "Value", field: "value" },
+    { title: "Desc", field: "desc" },
+  ],
+};
+
 const dashboardDef = {
   data: [], // Filled in later by JS
   index: "title",
@@ -540,4 +558,4 @@ const orcDef = {
   ],
 };
 
-export { orcDef, minipoolsDef, stakersDef, dashboardDef, contractsDef, ggAVAXDef };
+export { orcDef, minipoolsDef, stakersDef, dashboardDef, contractsDef, ggAVAXDef, ggAVAXStatsDef };