envio 3.0.0-alpha.3 → 3.0.0-alpha.5

package/src/tui/components/CustomHooks.res

@@ -0,0 +1,114 @@
+open Belt
+module InitApi = {
+  type ecosystem = | @as("evm") Evm | @as("fuel") Fuel | @as("svm") Svm
+  type body = {
+    envioVersion: string,
+    envioApiToken: option<string>,
+    ecosystem: ecosystem,
+    hyperSyncNetworks: array<int>,
+    rpcNetworks: array<int>,
+  }
+
+  let bodySchema = S.object(s => {
+    envioVersion: s.field("envioVersion", S.string),
+    envioApiToken: s.field("envioApiToken", S.option(S.string)),
+    ecosystem: s.field("ecosystem", S.enum([Evm, Fuel, Svm])),
+    hyperSyncNetworks: s.field("hyperSyncNetworks", S.array(S.int)),
+    rpcNetworks: s.field("rpcNetworks", S.array(S.int)),
+  })
+
+  let makeBody = (~envioVersion, ~envioApiToken, ~config: Config.t) => {
+    let hyperSyncNetworks = []
+    let rpcNetworks = []
+    config.chainMap
+    ->ChainMap.values
+    ->Array.forEach(({sources, id}) => {
+      switch sources->Js.Array2.some(s => s.poweredByHyperSync) {
+      | true => hyperSyncNetworks
+      | false => rpcNetworks
+      }
+      ->Js.Array2.push(id)
+      ->ignore
+    })
+
+    {
+      envioVersion,
+      envioApiToken,
+      ecosystem: (config.ecosystem.name :> ecosystem),
+      hyperSyncNetworks,
+      rpcNetworks,
+    }
+  }
+
+  type messageColor =
+    | @as("primary") Primary
+    | @as("secondary") Secondary
+    | @as("info") Info
+    | @as("danger") Danger
+    | @as("success") Success
+    | @as("white") White
+    | @as("gray") Gray
+
+  let toTheme = (color: messageColor): Style.chalkTheme =>
+    switch color {
+    | Primary => Primary
+    | Secondary => Secondary
+    | Info => Info
+    | Danger => Danger
+    | Success => Success
+    | White => White
+    | Gray => Gray
+    }
+
+  type message = {
+    color: messageColor,
+    content: string,
+  }
+
+  let messageSchema = S.object(s => {
+    color: s.field("color", S.enum([Primary, Secondary, Info, Danger, Success, White, Gray])),
+    content: s.field("content", S.string),
+  })
+
+  let client = Rest.client(Env.envioAppUrl ++ "/api")
+
+  let route = Rest.route(() => {
+    method: Post,
+    path: "/hyperindex/init",
+    input: s => s.body(bodySchema),
+    responses: [s => s.field("messages", S.array(messageSchema))],
+  })
+
+  let getMessages = async (~config) => {
+    let envioVersion = Utils.EnvioPackage.value.version
+    let body = makeBody(~envioVersion, ~envioApiToken=Env.envioApiToken, ~config)
+
+    switch await route->Rest.fetch(body, ~client) {
+    | exception exn => Error(exn->Obj.magic)
+    | messages => Ok(messages)
+    }
+  }
+}
+
+type request<'ok, 'err> = Data('ok) | Loading | Err('err)
+
+let useMessages = (~config) => {
+  let (request, setRequest) = React.useState(_ => Loading)
+  React.useEffect0(() => {
+    InitApi.getMessages(~config)
+    ->Promise.thenResolve(res =>
+      switch res {
+      | Ok(data) => setRequest(_ => Data(data))
+      | Error(e) =>
+        Logging.error({
+          "msg": "Failed to load messages from envio server",
+          "err": e->Utils.prettifyExn,
+        })
+        setRequest(_ => Err(e))
+      }
+    )
+    ->ignore
+    None
+  })
+  request
+}

package/src/tui/components/CustomHooks.res.mjs

@@ -0,0 +1,162 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Env from "../../Env.res.mjs";
+import * as Rest from "../../vendored/Rest.res.mjs";
+import * as Utils from "../../Utils.res.mjs";
+import * as React from "react";
+import * as Logging from "../../Logging.res.mjs";
+import * as ChainMap from "../../ChainMap.res.mjs";
+import * as Belt_Array from "rescript/lib/es6/belt_Array.js";
+import * as S$RescriptSchema from "rescript-schema/src/S.res.mjs";
+import * as Caml_js_exceptions from "rescript/lib/es6/caml_js_exceptions.js";
+
+var bodySchema = S$RescriptSchema.object(function (s) {
+      return {
+              envioVersion: s.f("envioVersion", S$RescriptSchema.string),
+              envioApiToken: s.f("envioApiToken", S$RescriptSchema.option(S$RescriptSchema.string)),
+              ecosystem: s.f("ecosystem", S$RescriptSchema.$$enum([
+                        "evm",
+                        "fuel",
+                        "svm"
+                      ])),
+              hyperSyncNetworks: s.f("hyperSyncNetworks", S$RescriptSchema.array(S$RescriptSchema.$$int)),
+              rpcNetworks: s.f("rpcNetworks", S$RescriptSchema.array(S$RescriptSchema.$$int))
+            };
+    });
+
+function makeBody(envioVersion, envioApiToken, config) {
+  var hyperSyncNetworks = [];
+  var rpcNetworks = [];
+  Belt_Array.forEach(ChainMap.values(config.chainMap), (function (param) {
+          (
+              param.sources.some(function (s) {
+                    return s.poweredByHyperSync;
+                  }) ? hyperSyncNetworks : rpcNetworks
+            ).push(param.id);
+        }));
+  return {
+          envioVersion: envioVersion,
+          envioApiToken: envioApiToken,
+          ecosystem: config.ecosystem.name,
+          hyperSyncNetworks: hyperSyncNetworks,
+          rpcNetworks: rpcNetworks
+        };
+}
+
+function toTheme(color) {
+  switch (color) {
+    case "primary" :
+        return "#9860E5";
+    case "secondary" :
+        return "#FFBB2F";
+    case "info" :
+        return "#6CBFEE";
+    case "danger" :
+        return "#FF8269";
+    case "success" :
+        return "#3B8C3D";
+    case "white" :
+        return "white";
+    case "gray" :
+        return "gray";
+    
+  }
+}
+
+var messageSchema = S$RescriptSchema.object(function (s) {
+      return {
+              color: s.f("color", S$RescriptSchema.$$enum([
+                        "primary",
+                        "secondary",
+                        "info",
+                        "danger",
+                        "success",
+                        "white",
+                        "gray"
+                      ])),
+              content: s.f("content", S$RescriptSchema.string)
+            };
+    });
+
+var client = Rest.client(Env.envioAppUrl + "/api", undefined);
+
+function route() {
+  return {
+          method: "POST",
+          path: "/hyperindex/init",
+          input: (function (s) {
+              return s.body(bodySchema);
+            }),
+          responses: [(function (s) {
+                return s.field("messages", S$RescriptSchema.array(messageSchema));
+              })]
+        };
+}
+
+async function getMessages(config) {
+  var envioVersion = Utils.EnvioPackage.value.version;
+  var body = makeBody(envioVersion, Env.envioApiToken, config);
+  var messages;
+  try {
+    messages = await Rest.$$fetch(route, body, client);
+  }
+  catch (raw_exn){
+    var exn = Caml_js_exceptions.internalToOCamlException(raw_exn);
+    return {
+            TAG: "Error",
+            _0: exn
+          };
+  }
+  return {
+          TAG: "Ok",
+          _0: messages
+        };
+}
+
+var InitApi = {
+  bodySchema: bodySchema,
+  makeBody: makeBody,
+  toTheme: toTheme,
+  messageSchema: messageSchema,
+  client: client,
+  route: route,
+  getMessages: getMessages
+};
+
+function useMessages(config) {
+  var match = React.useState(function () {
+        return "Loading";
+      });
+  var setRequest = match[1];
+  React.useEffect((function () {
+          getMessages(config).then(function (res) {
+                if (res.TAG === "Ok") {
+                  var data = res._0;
+                  return setRequest(function (param) {
+                              return {
+                                      TAG: "Data",
+                                      _0: data
+                                    };
+                            });
+                }
+                var e = res._0;
+                Logging.error({
+                      msg: "Failed to load messages from envio server",
+                      err: Utils.prettifyExn(e)
+                    });
+                setRequest(function (param) {
+                      return {
+                              TAG: "Err",
+                              _0: e
+                            };
+                    });
+              });
+        }), []);
+  return match[0];
+}
+
+export {
+  InitApi ,
+  useMessages ,
+}
+/* bodySchema Not a pure module */

package/src/tui/components/Messages.res

@@ -0,0 +1,41 @@
+open Belt
+open Ink
+module Message = {
+  @react.component
+  let make = (~message: CustomHooks.InitApi.message) => {
+    <Text color={message.color->CustomHooks.InitApi.toTheme}>
+      {message.content->React.string}
+    </Text>
+  }
+}
+
+module Notifications = {
+  @react.component
+  let make = (~children) => {
+    <>
+      <Newline />
+      <Text bold=true> {"Notifications:"->React.string} </Text>
+      {children}
+    </>
+  }
+}
+
+@react.component
+let make = (~config) => {
+  let messages = CustomHooks.useMessages(~config)
+  <>
+    {switch messages {
+    | Data([]) | Loading => React.null //Don't show anything while loading or no messages
+    | Data(messages) =>
+      <Notifications>
+        {messages
+        ->Array.mapWithIndex((i, message) => {<Message key={i->Int.toString} message />})
+        ->React.array}
+      </Notifications>
+    | Err(_) =>
+      <Notifications>
+        <Message message={color: Danger, content: "Failed to load messages from envio server"} />
+      </Notifications>
+    }}
+  </>
+}

package/src/tui/components/Messages.res.mjs

@@ -0,0 +1,75 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as $$Ink from "../bindings/Ink.res.mjs";
+import * as $$Ink$1 from "ink";
+import * as Belt_Array from "rescript/lib/es6/belt_Array.js";
+import * as Caml_option from "rescript/lib/es6/caml_option.js";
+import * as CustomHooks from "./CustomHooks.res.mjs";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function Messages$Message(props) {
+  var message = props.message;
+  return JsxRuntime.jsx($$Ink$1.Text, {
+              children: message.content,
+              color: CustomHooks.InitApi.toTheme(message.color)
+            });
+}
+
+var Message = {
+  make: Messages$Message
+};
+
+function Messages$Notifications(props) {
+  return JsxRuntime.jsxs(JsxRuntime.Fragment, {
+              children: [
+                JsxRuntime.jsx($$Ink.Newline.make, {}),
+                JsxRuntime.jsx($$Ink$1.Text, {
+                      children: "Notifications:",
+                      bold: true
+                    }),
+                props.children
+              ]
+            });
+}
+
+var Notifications = {
+  make: Messages$Notifications
+};
+
+function Messages(props) {
+  var messages = CustomHooks.useMessages(props.config);
+  var tmp;
+  if (typeof messages !== "object") {
+    tmp = null;
+  } else if (messages.TAG === "Data") {
+    var messages$1 = messages._0;
+    tmp = messages$1.length !== 0 ? JsxRuntime.jsx(Messages$Notifications, {
+            children: Belt_Array.mapWithIndex(messages$1, (function (i, message) {
+                    return JsxRuntime.jsx(Messages$Message, {
+                                message: message
+                              }, String(i));
+                  }))
+          }) : null;
+  } else {
+    tmp = JsxRuntime.jsx(Messages$Notifications, {
+          children: JsxRuntime.jsx(Messages$Message, {
+                message: {
+                  color: "danger",
+                  content: "Failed to load messages from envio server"
+                }
+              })
+        });
+  }
+  return JsxRuntime.jsx(JsxRuntime.Fragment, {
+              children: Caml_option.some(tmp)
+            });
+}
+
+var make = Messages;
+
+export {
+  Message ,
+  Notifications ,
+  make ,
+}
+/* Ink Not a pure module */

package/src/tui/components/SyncETA.res

@@ -0,0 +1,193 @@
+open Ink
+open Belt
+
+let isIndexerFullySynced = (chains: array<TuiData.chain>) => {
+  chains->Array.reduce(true, (accum, current) => {
+    switch current.progress {
+    | Synced(_) => accum
+    | _ => false
+    }
+  })
+}
+
+let getTotalRemainingBlocks = (chains: array<TuiData.chain>) => {
+  chains->Array.reduce(0, (accum, {progress, knownHeight, latestFetchedBlockNumber, endBlock}) => {
+    let finalBlock = switch endBlock {
+    | Some(endBlock) => endBlock
+    | None => knownHeight
+    }
+    switch progress {
+    | Syncing({latestProcessedBlock})
+    | Synced({latestProcessedBlock}) =>
+      finalBlock - latestProcessedBlock + accum
+    | SearchingForEvents => finalBlock - latestFetchedBlockNumber + accum
+    }
+  })
+}
+
+let getLatestTimeCaughtUpToHead = (chains: array<TuiData.chain>, indexerStartTime: Js.Date.t) => {
+  let latesttimestampCaughtUpToHeadOrEndblockFloat = chains->Array.reduce(0.0, (accum, current) => {
+    switch current.progress {
+    | Synced({timestampCaughtUpToHeadOrEndblock}) =>
+      timestampCaughtUpToHeadOrEndblock->Js.Date.valueOf > accum
+        ? timestampCaughtUpToHeadOrEndblock->Js.Date.valueOf
+        : accum
+    | Syncing(_)
+    | SearchingForEvents => accum
+    }
+  })
+
+  DateFns.formatDistanceWithOptions(
+    indexerStartTime,
+    latesttimestampCaughtUpToHeadOrEndblockFloat->Js.Date.fromFloat,
+    {includeSeconds: true},
+  )
+}
+
+let getTotalBlocksProcessed = (chains: array<TuiData.chain>) => {
+  chains->Array.reduce(0, (accum, {progress, latestFetchedBlockNumber}) => {
+    switch progress {
+    | Syncing({latestProcessedBlock, firstEventBlockNumber})
+    | Synced({latestProcessedBlock, firstEventBlockNumber}) =>
+      latestProcessedBlock - firstEventBlockNumber + accum
+    | SearchingForEvents => latestFetchedBlockNumber + accum
+    }
+  })
+}
+
+let useShouldDisplayEta = (~chains: array<TuiData.chain>) => {
+  let (shouldDisplayEta, setShouldDisplayEta) = React.useState(_ => false)
+  React.useEffect(() => {
+    //Only compute this while it is not displaying eta
+    if !shouldDisplayEta {
+      //Each chain should have fetched at least one batch
+      let (allChainsHaveFetchedABatch, totalNumBatchesFetched) = chains->Array.reduce((true, 0), (
+        (allChainsHaveFetchedABatch, totalNumBatchesFetched),
+        chain,
+      ) => {
+        (
+          allChainsHaveFetchedABatch && chain.numBatchesFetched >= 1,
+          totalNumBatchesFetched + chain.numBatchesFetched,
+        )
+      })
+
+      //Min num fetched batches is num of chains + 2. All
+      // Chains should have fetched at least 1 batch. (They
+      // could then be blocked from fetching if they are past
+      //the max queue size on first batch)
+      // Only display once an additinal 2 batches have been fetched to allow
+      // eta to realistically stabalize
+      let numChains = chains->Array.length
+      let minTotalBatches = numChains + 2
+      let hasMinNumBatches = totalNumBatchesFetched >= minTotalBatches
+
+      let shouldDisplayEta = allChainsHaveFetchedABatch && hasMinNumBatches
+
+      if shouldDisplayEta {
+        setShouldDisplayEta(_ => true)
+      }
+    }
+
+    None
+  }, [chains])
+
+  shouldDisplayEta
+}
+
+let useEta = (~chains, ~indexerStartTime) => {
+  let shouldDisplayEta = useShouldDisplayEta(~chains)
+  let (secondsToSub, setSecondsToSub) = React.useState(_ => 0.)
+  let (timeSinceStart, setTimeSinceStart) = React.useState(_ => 0.)
+
+  React.useEffect2(() => {
+    setTimeSinceStart(_ => Js.Date.now() -. indexerStartTime->Js.Date.valueOf)
+    setSecondsToSub(_ => 0.)
+
+    let intervalId = Js.Global.setInterval(() => {
+      setSecondsToSub(prev => prev +. 1.)
+    }, 1000)
+
+    Some(() => Js.Global.clearInterval(intervalId))
+  }, (chains, indexerStartTime))
+
+  //blocksProcessed/remainingBlocks = timeSoFar/eta
+  //eta = (timeSoFar/blocksProcessed) * remainingBlocks
+
+  let blocksProcessed = getTotalBlocksProcessed(chains)->Int.toFloat
+  if shouldDisplayEta && blocksProcessed > 0. {
+    let nowDate = Js.Date.now()
+    let remainingBlocks = getTotalRemainingBlocks(chains)->Int.toFloat
+    let etaFloat = timeSinceStart /. blocksProcessed *. remainingBlocks
+    let millisToSub = secondsToSub *. 1000.
+    let etaFloat = Pervasives.max(etaFloat -. millisToSub, 0.0) //template this
+    let eta = (etaFloat +. nowDate)->Js.Date.fromFloat
+    let interval: DateFns.interval = {start: nowDate->Js.Date.fromFloat, end: eta}
+    let duration = DateFns.intervalToDuration(interval)
+    let formattedDuration = DateFns.formatDuration(
+      duration,
+      {format: ["hours", "minutes", "seconds"]},
+    )
+    let outputString = switch formattedDuration {
+    | "" => "less than 1 second"
+    | formattedDuration => formattedDuration
+    }
+    Some(outputString)
+  } else {
+    None
+  }
+}
+
+module Syncing = {
+  @react.component
+  let make = (~etaStr) => {
+    <Text bold=true>
+      <Text> {"Sync Time ETA: "->React.string} </Text>
+      <Text> {etaStr->React.string} </Text>
+      <Text> {" ("->React.string} </Text>
+      <Text color=Primary>
+        <Spinner />
+      </Text>
+      <Text color=Secondary> {" in progress"->React.string} </Text>
+      <Text> {")"->React.string} </Text>
+    </Text>
+  }
+}
+
+module Synced = {
+  @react.component
+  let make = (~latestTimeCaughtUpToHeadStr) => {
+    <Text bold=true>
+      <Text> {"Time Synced: "->React.string} </Text>
+      <Text> {`${latestTimeCaughtUpToHeadStr}`->React.string} </Text>
+      <Text> {" ("->React.string} </Text>
+      <Text color=Success> {"synced"->React.string} </Text>
+      <Text> {")"->React.string} </Text>
+    </Text>
+  }
+}
+
+module Calculating = {
+  @react.component
+  let make = () => {
+    <Text>
+      <Text color=Primary>
+        <Spinner />
+      </Text>
+      <Text bold=true> {" Calculating ETA..."->React.string} </Text>
+    </Text>
+  }
+}
+
+@react.component
+let make = (~chains, ~indexerStartTime) => {
+  let optEta = useEta(~chains, ~indexerStartTime)
+  if isIndexerFullySynced(chains) {
+    let latestTimeCaughtUpToHeadStr = getLatestTimeCaughtUpToHead(chains, indexerStartTime)
+    <Synced latestTimeCaughtUpToHeadStr /> //TODO add real time
+  } else {
+    switch optEta {
+    | Some(etaStr) => <Syncing etaStr />
+    | None => <Calculating />
+    }
+  }
+}