Baseline OETH analytics & Dune data integrations

components/Button.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback } from "react";
+import classNames from "classnames";
+
+interface Props extends React.HTMLProps<HTMLButtonElement> {
+  children?: string | React.ReactNode;
+  prepend?: React.ReactNode;
+  append?: React.ReactNode;
+  buttonSize?:
+    | "base"
+    | "xxs"
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "4xl"
+    | "5xl"
+    | "6xl";
+  palette?:
+    | "default"
+    | "highlight"
+    | "orange"
+    | "dimmed"
+    | "white"
+    | "red"
+    | "primary"
+    | "error"
+    | "blue"
+    | "success"
+    | "balance"
+    | "outline"
+    | "deposit";
+  className?: string;
+  type?: "button" | "submit" | "reset";
+  backgroundColor?: string;
+}
+
+type PaletteState = {
+  backgroundColor?: string;
+  borderColor?: string;
+  color?: string;
+};
+
+type Palette = {
+  blur: PaletteState;
+  hover: PaletteState;
+  disabled: PaletteState;
+};
+
+type Palettes = {
+  [key: string]: Palette;
+};
+
+const Palettes: Palettes = {
+  default: {
+    blur: {
+      backgroundColor: "bg-gradient2",
+      borderColor: "border-none",
+      color: "text-origin-white",
+    },
+    hover: {
+      backgroundColor: "hover:bg-dark",
+      borderColor: "hover:border-dark",
+      color: "hover:text-[#FCFCFC]",
+    },
+    disabled: {
+      backgroundColor: "disabled:!bg-dark",
+      borderColor: "disabled:!border-dark",
+      color: "disabled:!text-[#FCFCFC]",
+    },
+  },
+};
+
+const Button: React.ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  {
+    children,
+    prepend,
+    append,
+    className,
+    buttonSize = "base",
+    palette = "default",
+    backgroundColor,
+    type = "button",
+    href,
+    ...restOfProps
+  },
+  ref
+) => {
+  const getButtonSize = useCallback((buttonSize) => {
+    const classList = [];
+    switch (buttonSize) {
+      case "sm":
+        classList.push("h-[40px] px-6 text-sm");
+        break;
+      case "lg":
+        classList.push("h-[64px] px-12 text-lg");
+        break;
+      default:
+        classList.push("h-[56px] px-10 text-base font-light");
+    }
+    return classList.join(" ");
+  }, []);
+
+  const getClassName = useCallback((palette = "default") => {
+    const classList = [];
+    // Handle palette
+    switch (palette) {
+      default:
+        classList.push(
+          Palettes[palette]?.blur?.backgroundColor,
+          Palettes[palette]?.blur?.borderColor,
+          Palettes[palette]?.blur?.color,
+          Palettes[palette]?.hover?.backgroundColor,
+          Palettes[palette]?.hover?.borderColor,
+          Palettes[palette]?.hover?.color,
+          Palettes[palette]?.disabled?.backgroundColor,
+          Palettes[palette]?.disabled?.borderColor,
+          Palettes[palette]?.disabled?.color
+        );
+    }
+    return classList.join(" ");
+  }, []);
+
+  return (
+    <button
+      ref={ref}
+      className={classNames(
+        "flex flex-row items-center rounded-full",
+        className,
+        getButtonSize(buttonSize),
+        getClassName(palette),
+        `text-${buttonSize}`
+      )}
+      {...restOfProps}
+      type={type}
+    >
+      {prepend && (
+        <div className="mr-4 flex flex-row items-center">{prepend}</div>
+      )}
+      {children}
+      {append && (
+        <div className="ml-4 flex flex-row items-center">{append}</div>
+      )}
+    </button>
+  );
+};
+
+export default React.forwardRef(Button);

components/ErrorBoundary.tsx

@@ -0,0 +1,43 @@
+import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
+import { Typography } from "@originprotocol/origin-storybook";
+import Button from "./Button";
+
+const fallbackRender = ({ resetErrorBoundary }) => {
+  return (
+    <div
+      role="alert"
+      className="flex flex-col space-y-4 items-center justify-center text-center h-[50vh]"
+    >
+      <Typography.H2
+        as="h1"
+        className="text-2xl md:text-7xl text-gradient2 font-bold"
+      >
+        Ooops...
+      </Typography.H2>
+      <Typography.H3
+        className="text-xl md:text-2xl"
+        style={{ fontWeight: 400 }}
+      >
+        Sorry, an error occurred while loading the view.
+      </Typography.H3>
+      <footer>
+        <Button buttonSize="sm" onClick={resetErrorBoundary}>
+          <Typography.Body2>Please try again</Typography.Body2>
+        </Button>
+      </footer>
+    </div>
+  );
+};
+
+const logError = (error: Error, info: { componentStack: string }) => {
+  // Do something with the error, e.g. log to an external API
+  console.error(error);
+};
+
+const ErrorBoundary = ({ children }) => (
+  <ReactErrorBoundary fallbackRender={fallbackRender} onError={logError}>
+    {children}
+  </ReactErrorBoundary>
+);
+
+export default ErrorBoundary;

components/GradientButton.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
 
-interface Gradient2ButtonProps {
+interface GradientButtonProps {
   onClick?: () => void;
   className?: string;
   elementId?: string;
@@ -14,7 +14,7 @@ const GradientButton = ({
   elementId,
   outerDivClassName,
   children,
-}: PropsWithChildren<Gradient2ButtonProps>) => {
+}: PropsWithChildren<GradientButtonProps>) => {
   return (
     <div
       className={twMerge(

components/LayoutBox.tsx

@@ -0,0 +1,37 @@
+import cx from "classnames";
+import { TailSpin } from "react-loader-spinner";
+
+const LayoutBox = ({
+  className = "",
+  loadingClassName = "",
+  isLoading = false,
+  children,
+}) => (
+  <div
+    className={cx(
+      "relative flex flex-col w-full h-full bg-origin-bg-grey overflow-hidden",
+      className
+    )}
+  >
+    {isLoading && (
+      <div
+        className={cx(
+          "flex items-center justify-center absolute z-[2] left-0 top-0 w-full h-full bg-black bg-opacity-20",
+          loadingClassName
+        )}
+      >
+        <TailSpin
+          height="100"
+          width="100"
+          color="#0074F0"
+          ariaLabel="tail-spin-loading"
+          radius="1"
+          visible={true}
+        />
+      </div>
+    )}
+    {children}
+  </div>
+);
+
+export default LayoutBox;

components/ProgressBar.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import cx from "classnames";
+
+const ProgressBar = ({
+  numerator,
+  color,
+  denominator = 100,
+  loadDelay = 300,
+  className = "",
+}) => {
+  const [value, setValue] = useState({ numerator: 0, denominator });
+  useEffect(() => {
+    setTimeout(() => {
+      setValue({
+        numerator,
+        denominator,
+      });
+    }, loadDelay);
+  }, []);
+  return (
+    <div className="w-full h-[8px] rounded-full bg-origin-bg-dgrey">
+      <div
+        className={cx(
+          "w-full h-full transition-all duration-1000 ease-in rounded-full",
+          className
+        )}
+        style={{
+          width: `${(value?.numerator / value?.denominator) * 100}%`,
+          background: color,
+        }}
+      />
+    </div>
+  );
+};
+
+export default ProgressBar;

components/RealTimeStats.tsx

@@ -0,0 +1,35 @@
+import { useFeeData } from "wagmi";
+import { ethers } from "ethers";
+import Image from "next/image";
+import { Typography } from "@originprotocol/origin-storybook";
+
+const RealTimeStats = () => {
+  const { data, isError, isLoading } = useFeeData();
+
+  const gwei =
+    !isLoading && !isError
+      ? parseFloat(
+          ethers.utils.formatUnits(data?.formatted?.gasPrice || 0, "gwei")
+        )?.toFixed(2)
+      : 0;
+
+  return (
+    <div className="flex flex-row lg:justify-end w-full h-[44px] space-x-2 ">
+      <div className="flex items-center max-w-[120px] w-full h-full rounded-md px-2 bg-origin-bg-grey text-origin-white">
+        <div className="flex flex-row items-center justify-center space-x-2 w-full h-full">
+          <Image
+            src="/images/gas.svg"
+            height={18}
+            width={18}
+            alt="Gas station icon"
+          />
+          <Typography.Caption className="text-subheading">
+            {gwei}
+          </Typography.Caption>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RealTimeStats;