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

package/src/tui/Tui.res

@@ -0,0 +1,266 @@
+open Ink
+open Belt
+
+module ChainLine = {
+  @react.component
+  let make = (
+    ~chainId,
+    ~maxChainIdLength,
+    ~stdoutColumns: int,
+    ~progressBlock,
+    ~bufferBlock,
+    ~sourceBlock,
+    ~firstEventBlock,
+    ~startBlock,
+    ~endBlock,
+    ~poweredByHyperSync,
+    ~eventsProcessed,
+  ) => {
+    let chainsWidth = Pervasives.min(stdoutColumns - 2, 60)
+    let headerWidth = maxChainIdLength + 10 // 10 for additional text
+
+    switch (progressBlock, bufferBlock, sourceBlock) {
+    | (Some(progressBlock), Some(bufferBlock), Some(sourceBlock)) =>
+      let toBlock = switch endBlock {
+      | Some(endBlock) => Pervasives.min(sourceBlock, endBlock)
+      | None => sourceBlock
+      }
+      let firstEventBlock = firstEventBlock->Option.getWithDefault(startBlock)
+
+      let progressBlockStr = progressBlock->TuiData.formatLocaleString
+      let toBlockStr = toBlock->TuiData.formatLocaleString
+      let eventsStr = eventsProcessed->TuiData.formatLocaleString
+
+      let blocksText =
+        `Blocks: ${progressBlockStr} / ${toBlockStr}` ++
+        (endBlock->Option.isSome ? " (End Block)" : "") ++ `  `
+      let eventsText = `Events: ${eventsStr}`
+
+      let fitsSameLine = blocksText->String.length + eventsText->String.length <= chainsWidth
+
+      <Box flexDirection={Column}>
+        <Box flexDirection=Row width=Num(chainsWidth)>
+          <Box width={Num(headerWidth)}>
+            <Text> {"Chain: "->React.string} </Text>
+            <Text bold=true> {chainId->React.string} </Text>
+            <Text> {" "->React.string} </Text>
+            {poweredByHyperSync ? <Text color=Secondary> {"⚡"->React.string} </Text> : React.null}
+          </Box>
+          <BufferedProgressBar
+            barWidth={chainsWidth - headerWidth}
+            loaded={progressBlock - firstEventBlock}
+            buffered={bufferBlock - firstEventBlock}
+            outOf={toBlock - firstEventBlock}
+            loadingColor={Secondary}
+          />
+        </Box>
+        <Box flexDirection={Row}>
+          <Text color={Gray}> {blocksText->React.string} </Text>
+          {fitsSameLine ? <Text color={Gray}> {eventsText->React.string} </Text> : React.null}
+        </Box>
+        {fitsSameLine
+          ? React.null
+          : <Box flexDirection={Row}>
+              <Text color={Gray}> {eventsText->String.trim->React.string} </Text>
+            </Box>}
+        <Newline />
+      </Box>
+    | (_, _, _) =>
+      <>
+        <Box flexDirection=Row width=Num(chainsWidth)>
+          <Box width={Num(headerWidth)}>
+            <Text> {"Chain: "->React.string} </Text>
+            <Text bold=true> {chainId->React.string} </Text>
+            <Text> {" "->React.string} </Text>
+            {poweredByHyperSync ? <Text color=Secondary> {"⚡"->React.string} </Text> : React.null}
+          </Box>
+          <Text> {"Loading progress..."->React.string} </Text>
+        </Box>
+        <Newline />
+      </>
+    }
+  }
+}
+
+module TotalEventsProcessed = {
+  @react.component
+  let make = (~totalEventsProcessed) => {
+    let label = "Total Events: "
+    <Text>
+      <Text bold=true> {label->React.string} </Text>
+      <Text color={Secondary}>
+        {`${totalEventsProcessed->TuiData.formatLocaleString}`->React.string}
+      </Text>
+    </Text>
+  }
+}
+
+module App = {
+  @react.component
+  let make = (~getState) => {
+    let stdoutColumns = Hooks.useStdoutColumns()
+    let (state: GlobalState.t, setState) = React.useState(() => getState())
+
+    // useEffect to refresh state every 500ms
+    React.useEffect(() => {
+      let intervalId = Js.Global.setInterval(() => {
+        setState(_ => getState())
+      }, 500)
+
+      Some(
+        () => {
+          Js.Global.clearInterval(intervalId)
+        },
+      )
+    }, [getState])
+
+    let chains =
+      state.chainManager.chainFetchers
+      ->ChainMap.values
+      ->Array.map(cf => {
+        let {numEventsProcessed, fetchState, numBatchesFetched} = cf
+        let latestFetchedBlockNumber = Pervasives.max(fetchState->FetchState.bufferBlockNumber, 0)
+        let hasProcessedToEndblock = cf->ChainFetcher.hasProcessedToEndblock
+        let knownHeight =
+          cf->ChainFetcher.hasProcessedToEndblock
+            ? cf.fetchState.endBlock->Option.getWithDefault(cf.fetchState.knownHeight)
+            : cf.fetchState.knownHeight
+
+        let progress: TuiData.progress = if hasProcessedToEndblock {
+          // If the endblock has been reached then set the progress to synced.
+          // if there's chains that have no events in the block range start->end,
+          // it's possible there are no events in that block  range (ie firstEventBlockNumber = None)
+          // This ensures TUI still displays synced in this case
+          let {
+            committedProgressBlockNumber,
+            timestampCaughtUpToHeadOrEndblock,
+            numEventsProcessed,
+            firstEventBlockNumber,
+          } = cf
+
+          Synced({
+            firstEventBlockNumber: firstEventBlockNumber->Option.getWithDefault(0),
+            latestProcessedBlock: committedProgressBlockNumber,
+            timestampCaughtUpToHeadOrEndblock: timestampCaughtUpToHeadOrEndblock->Option.getWithDefault(
+              Js.Date.now()->Js.Date.fromFloat,
+            ),
+            numEventsProcessed,
+          })
+        } else {
+          switch cf {
+          | {
+              committedProgressBlockNumber,
+              timestampCaughtUpToHeadOrEndblock: Some(timestampCaughtUpToHeadOrEndblock),
+              firstEventBlockNumber: Some(firstEventBlockNumber),
+            } =>
+            Synced({
+              firstEventBlockNumber,
+              latestProcessedBlock: committedProgressBlockNumber,
+              timestampCaughtUpToHeadOrEndblock,
+              numEventsProcessed,
+            })
+          | {
+              committedProgressBlockNumber,
+              timestampCaughtUpToHeadOrEndblock: None,
+              firstEventBlockNumber: Some(firstEventBlockNumber),
+            } =>
+            Syncing({
+              firstEventBlockNumber,
+              latestProcessedBlock: committedProgressBlockNumber,
+              numEventsProcessed,
+            })
+          | {firstEventBlockNumber: None} => SearchingForEvents
+          }
+        }
+
+        (
+          {
+            progress,
+            knownHeight,
+            latestFetchedBlockNumber,
+            numBatchesFetched,
+            eventsProcessed: numEventsProcessed,
+            chainId: cf.chainConfig.id->Int.toString,
+            progressBlock: cf.committedProgressBlockNumber === -1
+              ? None
+              : Some(cf.committedProgressBlockNumber),
+            bufferBlock: Some(latestFetchedBlockNumber),
+            sourceBlock: Some(cf.fetchState.knownHeight),
+            firstEventBlockNumber: cf.firstEventBlockNumber,
+            startBlock: cf.fetchState.startBlock,
+            endBlock: cf.fetchState.endBlock,
+            poweredByHyperSync: (
+              cf.sourceManager->SourceManager.getActiveSource
+            ).poweredByHyperSync,
+          }: TuiData.chain
+        )
+      })
+
+    let totalEventsProcessed = chains->Array.reduce(0, (acc, chain) => {
+      acc + chain.eventsProcessed
+    })
+    let maxChainIdLength = chains->Array.reduce(0, (acc, chain) => {
+      let chainIdLength = chain.chainId->String.length
+      if chainIdLength > acc {
+        chainIdLength
+      } else {
+        acc
+      }
+    })
+
+    <Box flexDirection={Column}>
+      <BigText
+        text="envio"
+        colors=[Secondary, Primary]
+        font={chains->Array.length > 5 ? Tiny : Block}
+        space=false
+      />
+      <Newline />
+      {chains
+      ->Array.mapWithIndex((i, chainData) => {
+        <ChainLine
+          key={i->Int.toString}
+          chainId={chainData.chainId}
+          maxChainIdLength={maxChainIdLength}
+          progressBlock={chainData.progressBlock}
+          bufferBlock={chainData.bufferBlock}
+          sourceBlock={chainData.sourceBlock}
+          startBlock={chainData.startBlock}
+          endBlock={chainData.endBlock}
+          stdoutColumns={stdoutColumns}
+          firstEventBlock={chainData.firstEventBlockNumber}
+          poweredByHyperSync={chainData.poweredByHyperSync}
+          eventsProcessed={chainData.eventsProcessed}
+        />
+      })
+      ->React.array}
+      <TotalEventsProcessed totalEventsProcessed />
+      <SyncETA chains indexerStartTime=state.indexerStartTime />
+      <Newline />
+      <Box flexDirection={Row}>
+        <Text> {"GraphQL: "->React.string} </Text>
+        <Text color={Info} underline=true> {Env.Hasura.url->React.string} </Text>
+        {
+          let defaultPassword = "testing"
+          if Env.Hasura.secret == defaultPassword {
+            <Text color={Gray}> {` (password: ${defaultPassword})`->React.string} </Text>
+          } else {
+            React.null
+          }
+        }
+      </Box>
+      <Box flexDirection={Row}>
+        <Text> {"Dev Console: "->React.string} </Text>
+        <Text color={Info} underline=true> {`${Env.envioAppUrl}/console`->React.string} </Text>
+      </Box>
+      <Messages config=state.ctx.config />
+    </Box>
+  }
+}
+
+let start = (~getState) => {
+  let {rerender} = render(<App getState />)
+  () => {
+    rerender(<App getState />)
+  }
+}

package/src/tui/Tui.res.mjs

@@ -0,0 +1,342 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Env from "../Env.res.mjs";
+import * as $$Ink from "./bindings/Ink.res.mjs";
+import * as $$Ink$1 from "ink";
+import * as Caml from "rescript/lib/es6/caml.js";
+import * as React from "react";
+import * as $$String from "rescript/lib/es6/string.js";
+import * as SyncETA from "./components/SyncETA.res.mjs";
+import * as TuiData from "./components/TuiData.res.mjs";
+import * as ChainMap from "../ChainMap.res.mjs";
+import * as Messages from "./components/Messages.res.mjs";
+import * as Belt_Array from "rescript/lib/es6/belt_Array.js";
+import * as FetchState from "../FetchState.res.mjs";
+import * as Belt_Option from "rescript/lib/es6/belt_Option.js";
+import * as Caml_option from "rescript/lib/es6/caml_option.js";
+import * as ChainFetcher from "../ChainFetcher.res.mjs";
+import InkBigText from "ink-big-text";
+import * as SourceManager from "../sources/SourceManager.res.mjs";
+import * as JsxRuntime from "react/jsx-runtime";
+import * as BufferedProgressBar from "./components/BufferedProgressBar.res.mjs";
+
+function Tui$ChainLine(props) {
+  var poweredByHyperSync = props.poweredByHyperSync;
+  var endBlock = props.endBlock;
+  var sourceBlock = props.sourceBlock;
+  var bufferBlock = props.bufferBlock;
+  var progressBlock = props.progressBlock;
+  var chainId = props.chainId;
+  var chainsWidth = Caml.int_min(props.stdoutColumns - 2 | 0, 60);
+  var headerWidth = props.maxChainIdLength + 10 | 0;
+  if (progressBlock !== undefined && bufferBlock !== undefined && sourceBlock !== undefined) {
+    var toBlock = endBlock !== undefined && sourceBlock >= endBlock ? endBlock : sourceBlock;
+    var firstEventBlock = Belt_Option.getWithDefault(props.firstEventBlock, props.startBlock);
+    var progressBlockStr = TuiData.formatLocaleString(progressBlock);
+    var toBlockStr = TuiData.formatLocaleString(toBlock);
+    var eventsStr = TuiData.formatLocaleString(props.eventsProcessed);
+    var blocksText = "Blocks: " + progressBlockStr + " / " + toBlockStr + (
+      Belt_Option.isSome(endBlock) ? " (End Block)" : ""
+    ) + "  ";
+    var eventsText = "Events: " + eventsStr;
+    var fitsSameLine = (blocksText.length + eventsText.length | 0) <= chainsWidth;
+    return JsxRuntime.jsxs($$Ink$1.Box, {
+                children: [
+                  JsxRuntime.jsxs($$Ink$1.Box, {
+                        children: [
+                          JsxRuntime.jsxs($$Ink$1.Box, {
+                                children: [
+                                  JsxRuntime.jsx($$Ink$1.Text, {
+                                        children: "Chain: "
+                                      }),
+                                  JsxRuntime.jsx($$Ink$1.Text, {
+                                        children: chainId,
+                                        bold: true
+                                      }),
+                                  JsxRuntime.jsx($$Ink$1.Text, {
+                                        children: " "
+                                      }),
+                                  poweredByHyperSync ? JsxRuntime.jsx($$Ink$1.Text, {
+                                          children: "⚡",
+                                          color: "#FFBB2F"
+                                        }) : null
+                                ],
+                                width: headerWidth
+                              }),
+                          JsxRuntime.jsx(BufferedProgressBar.make, {
+                                loaded: progressBlock - firstEventBlock | 0,
+                                buffered: bufferBlock - firstEventBlock | 0,
+                                outOf: toBlock - firstEventBlock | 0,
+                                barWidth: chainsWidth - headerWidth | 0,
+                                loadingColor: "#FFBB2F"
+                              })
+                        ],
+                        width: chainsWidth,
+                        flexDirection: "row"
+                      }),
+                  JsxRuntime.jsxs($$Ink$1.Box, {
+                        children: [
+                          JsxRuntime.jsx($$Ink$1.Text, {
+                                children: blocksText,
+                                color: "gray"
+                              }),
+                          fitsSameLine ? JsxRuntime.jsx($$Ink$1.Text, {
+                                  children: eventsText,
+                                  color: "gray"
+                                }) : null
+                        ],
+                        flexDirection: "row"
+                      }),
+                  fitsSameLine ? null : JsxRuntime.jsx($$Ink$1.Box, {
+                          children: Caml_option.some(JsxRuntime.jsx($$Ink$1.Text, {
+                                    children: $$String.trim(eventsText),
+                                    color: "gray"
+                                  })),
+                          flexDirection: "row"
+                        }),
+                  JsxRuntime.jsx($$Ink.Newline.make, {})
+                ],
+                flexDirection: "column"
+              });
+  }
+  return JsxRuntime.jsxs(JsxRuntime.Fragment, {
+              children: [
+                JsxRuntime.jsxs($$Ink$1.Box, {
+                      children: [
+                        JsxRuntime.jsxs($$Ink$1.Box, {
+                              children: [
+                                JsxRuntime.jsx($$Ink$1.Text, {
+                                      children: "Chain: "
+                                    }),
+                                JsxRuntime.jsx($$Ink$1.Text, {
+                                      children: chainId,
+                                      bold: true
+                                    }),
+                                JsxRuntime.jsx($$Ink$1.Text, {
+                                      children: " "
+                                    }),
+                                poweredByHyperSync ? JsxRuntime.jsx($$Ink$1.Text, {
+                                        children: "⚡",
+                                        color: "#FFBB2F"
+                                      }) : null
+                              ],
+                              width: headerWidth
+                            }),
+                        JsxRuntime.jsx($$Ink$1.Text, {
+                              children: "Loading progress..."
+                            })
+                      ],
+                      width: chainsWidth,
+                      flexDirection: "row"
+                    }),
+                JsxRuntime.jsx($$Ink.Newline.make, {})
+              ]
+            });
+}
+
+var ChainLine = {
+  make: Tui$ChainLine
+};
+
+function Tui$TotalEventsProcessed(props) {
+  return JsxRuntime.jsxs($$Ink$1.Text, {
+              children: [
+                JsxRuntime.jsx($$Ink$1.Text, {
+                      children: "Total Events: ",
+                      bold: true
+                    }),
+                JsxRuntime.jsx($$Ink$1.Text, {
+                      children: TuiData.formatLocaleString(props.totalEventsProcessed),
+                      color: "#FFBB2F"
+                    })
+              ]
+            });
+}
+
+var TotalEventsProcessed = {
+  make: Tui$TotalEventsProcessed
+};
+
+function Tui$App(props) {
+  var getState = props.getState;
+  var stdoutColumns = $$Ink.Hooks.useStdoutColumns();
+  var match = React.useState(function () {
+        return getState();
+      });
+  var setState = match[1];
+  var state = match[0];
+  React.useEffect((function () {
+          var intervalId = setInterval((function () {
+                  setState(function (param) {
+                        return getState();
+                      });
+                }), 500);
+          return (function () {
+                    clearInterval(intervalId);
+                  });
+        }), [getState]);
+  var chains = Belt_Array.map(ChainMap.values(state.chainManager.chainFetchers), (function (cf) {
+          var numEventsProcessed = cf.numEventsProcessed;
+          var latestFetchedBlockNumber = Caml.int_max(FetchState.bufferBlockNumber(cf.fetchState), 0);
+          var hasProcessedToEndblock = ChainFetcher.hasProcessedToEndblock(cf);
+          var knownHeight = ChainFetcher.hasProcessedToEndblock(cf) ? Belt_Option.getWithDefault(cf.fetchState.endBlock, cf.fetchState.knownHeight) : cf.fetchState.knownHeight;
+          var progress;
+          if (hasProcessedToEndblock) {
+            progress = {
+              TAG: "Synced",
+              _0: {
+                firstEventBlockNumber: Belt_Option.getWithDefault(cf.firstEventBlockNumber, 0),
+                latestProcessedBlock: cf.committedProgressBlockNumber,
+                numEventsProcessed: cf.numEventsProcessed,
+                timestampCaughtUpToHeadOrEndblock: Belt_Option.getWithDefault(cf.timestampCaughtUpToHeadOrEndblock, new Date(Date.now()))
+              }
+            };
+          } else {
+            var timestampCaughtUpToHeadOrEndblock = cf.timestampCaughtUpToHeadOrEndblock;
+            if (timestampCaughtUpToHeadOrEndblock !== undefined) {
+              var firstEventBlockNumber = cf.firstEventBlockNumber;
+              progress = firstEventBlockNumber !== undefined ? ({
+                    TAG: "Synced",
+                    _0: {
+                      firstEventBlockNumber: firstEventBlockNumber,
+                      latestProcessedBlock: cf.committedProgressBlockNumber,
+                      numEventsProcessed: numEventsProcessed,
+                      timestampCaughtUpToHeadOrEndblock: Caml_option.valFromOption(timestampCaughtUpToHeadOrEndblock)
+                    }
+                  }) : "SearchingForEvents";
+            } else {
+              var firstEventBlockNumber$1 = cf.firstEventBlockNumber;
+              progress = firstEventBlockNumber$1 !== undefined ? ({
+                    TAG: "Syncing",
+                    _0: {
+                      firstEventBlockNumber: firstEventBlockNumber$1,
+                      latestProcessedBlock: cf.committedProgressBlockNumber,
+                      numEventsProcessed: numEventsProcessed
+                    }
+                  }) : "SearchingForEvents";
+            }
+          }
+          return {
+                  chainId: String(cf.chainConfig.id),
+                  eventsProcessed: numEventsProcessed,
+                  progressBlock: cf.committedProgressBlockNumber === -1 ? undefined : cf.committedProgressBlockNumber,
+                  bufferBlock: latestFetchedBlockNumber,
+                  sourceBlock: cf.fetchState.knownHeight,
+                  startBlock: cf.fetchState.startBlock,
+                  endBlock: cf.fetchState.endBlock,
+                  firstEventBlockNumber: cf.firstEventBlockNumber,
+                  poweredByHyperSync: SourceManager.getActiveSource(cf.sourceManager).poweredByHyperSync,
+                  progress: progress,
+                  latestFetchedBlockNumber: latestFetchedBlockNumber,
+                  knownHeight: knownHeight,
+                  numBatchesFetched: cf.numBatchesFetched
+                };
+        }));
+  var totalEventsProcessed = Belt_Array.reduce(chains, 0, (function (acc, chain) {
+          return acc + chain.eventsProcessed | 0;
+        }));
+  var maxChainIdLength = Belt_Array.reduce(chains, 0, (function (acc, chain) {
+          var chainIdLength = chain.chainId.length;
+          if (chainIdLength > acc) {
+            return chainIdLength;
+          } else {
+            return acc;
+          }
+        }));
+  var defaultPassword = "testing";
+  return JsxRuntime.jsxs($$Ink$1.Box, {
+              children: [
+                JsxRuntime.jsx(InkBigText, {
+                      text: "envio",
+                      font: chains.length > 5 ? "tiny" : "block",
+                      colors: [
+                        "#FFBB2F",
+                        "#9860E5"
+                      ],
+                      space: false
+                    }),
+                JsxRuntime.jsx($$Ink.Newline.make, {}),
+                Belt_Array.mapWithIndex(chains, (function (i, chainData) {
+                        return JsxRuntime.jsx(Tui$ChainLine, {
+                                    chainId: chainData.chainId,
+                                    maxChainIdLength: maxChainIdLength,
+                                    stdoutColumns: stdoutColumns,
+                                    progressBlock: chainData.progressBlock,
+                                    bufferBlock: chainData.bufferBlock,
+                                    sourceBlock: chainData.sourceBlock,
+                                    firstEventBlock: chainData.firstEventBlockNumber,
+                                    startBlock: chainData.startBlock,
+                                    endBlock: chainData.endBlock,
+                                    poweredByHyperSync: chainData.poweredByHyperSync,
+                                    eventsProcessed: chainData.eventsProcessed
+                                  }, String(i));
+                      })),
+                JsxRuntime.jsx(Tui$TotalEventsProcessed, {
+                      totalEventsProcessed: totalEventsProcessed
+                    }),
+                JsxRuntime.jsx(SyncETA.make, {
+                      chains: chains,
+                      indexerStartTime: state.indexerStartTime
+                    }),
+                JsxRuntime.jsx($$Ink.Newline.make, {}),
+                JsxRuntime.jsxs($$Ink$1.Box, {
+                      children: [
+                        JsxRuntime.jsx($$Ink$1.Text, {
+                              children: "GraphQL: "
+                            }),
+                        JsxRuntime.jsx($$Ink$1.Text, {
+                              children: Env.Hasura.url,
+                              color: "#6CBFEE",
+                              underline: true
+                            }),
+                        Env.Hasura.secret === defaultPassword ? JsxRuntime.jsx($$Ink$1.Text, {
+                                children: " (password: " + defaultPassword + ")",
+                                color: "gray"
+                              }) : null
+                      ],
+                      flexDirection: "row"
+                    }),
+                JsxRuntime.jsxs($$Ink$1.Box, {
+                      children: [
+                        JsxRuntime.jsx($$Ink$1.Text, {
+                              children: "Dev Console: "
+                            }),
+                        JsxRuntime.jsx($$Ink$1.Text, {
+                              children: Env.envioAppUrl + "/console",
+                              color: "#6CBFEE",
+                              underline: true
+                            })
+                      ],
+                      flexDirection: "row"
+                    }),
+                JsxRuntime.jsx(Messages.make, {
+                      config: state.ctx.config
+                    })
+              ],
+              flexDirection: "column"
+            });
+}
+
+var App = {
+  make: Tui$App
+};
+
+function start(getState) {
+  var match = $$Ink.render(undefined, JsxRuntime.jsx(Tui$App, {
+            getState: getState
+          }));
+  var rerender = match.rerender;
+  return function () {
+    rerender(JsxRuntime.jsx(Tui$App, {
+              getState: getState
+            }));
+  };
+}
+
+export {
+  ChainLine ,
+  TotalEventsProcessed ,
+  App ,
+  start ,
+}
+/* Env Not a pure module */