@xyo-network/react-shared 2.64.0-rc.7 → 2.64.1

package/dist/browser/index.js

@@ -1,7 +1,989 @@
-export * from "./components";
-export * from "./contexts";
-export * from "./hooks";
-export * from "./lib";
-export * from "./models";
-export * from "./SizeProp";
+// src/components/Ampersand.tsx
+import { Typography } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var Ampersand = (props) => {
+  return /* @__PURE__ */ jsx(Typography, { marginX: 1, component: "span", ...props, children: "&" });
+};
+
+// src/components/BasicHero/BasicHero.tsx
+import { Container, Grid, Typography as Typography2 } from "@mui/material";
+import { ButtonEx } from "@xylabs/react-button";
+import { FlexGrowCol, FlexGrowRow } from "@xylabs/react-flexbox";
+import { LinkEx } from "@xylabs/react-link";
+
+// src/hooks/GradientStyles/GradientStyles.tsx
+import { useTheme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+var colorfulGradientLightMode = () => {
+  return {
+    background: {
+      backgroundImage: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)"
+    },
+    border: {
+      borderImage: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)",
+      borderImageSlice: 1,
+      borderImageSource: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)",
+      borderRadius: 0,
+      borderStyle: "solid",
+      borderWidth: "2px"
+    },
+    heading: {
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      background: "-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)",
+      display: "inline-block"
+    }
+  };
+};
+var colorfulGradientDarkMode = () => {
+  return {
+    background: {
+      backgroundImage: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)"
+    },
+    border: {
+      borderImage: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)",
+      borderImageSlice: 1,
+      borderImageSource: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)",
+      borderRadius: 0,
+      borderStyle: "solid",
+      borderWidth: "2px"
+    },
+    heading: {
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      background: "-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)",
+      display: "inline-block"
+    }
+  };
+};
+var useGradientStyles = () => {
+  const theme = useTheme();
+  const styles = theme.palette.mode === "dark" ? colorfulGradientDarkMode() : colorfulGradientLightMode();
+  const classes = makeStyles(styles);
+  return { classes, styles };
+};
+
+// src/hooks/useDataState.ts
+import { useState } from "react";
+var useDataState = (defaultValue) => {
+  const [state, setState] = useState(defaultValue);
+  const setDataState = (value) => {
+    try {
+      if (JSON.stringify(value) !== JSON.stringify(state)) {
+        setState(value);
+      }
+    } catch (ex) {
+      console.error("setDataState failed!  Make sure data type is stringifiable!");
+    }
+  };
+  return [state, setDataState];
+};
+
+// src/hooks/useIsMobile.ts
+import { useTheme as useTheme2 } from "@mui/material";
+
+// src/hooks/useMediaQuery.ts
+import { useMediaQuery } from "@mui/material";
+
+// src/hooks/useIsMobile.ts
+var useIsMobile = () => {
+  const theme = useTheme2();
+  return useMediaQuery(theme.breakpoints.down("md"));
+};
+
+// src/hooks/usePayloadHash.ts
+import { usePromise } from "@xylabs/react-promise";
+import { PayloadHasher } from "@xyo-network/core";
+var usePayloadHash = (payload) => {
+  return usePromise(async () => payload ? await PayloadHasher.hashAsync(payload) : void 0, [payload])[0];
+};
+var usePayloadHashes = (payloads) => {
+  return usePromise(
+    async () => payloads ? await Promise.all(payloads.map(async (payload) => [payload, await PayloadHasher.hashAsync(payload)])) : void 0,
+    [payloads]
+  )[0];
+};
+
+// src/hooks/usePromise.ts
+import { usePromise as importedUsePromise } from "@xylabs/react-promise";
+var usePromise2 = importedUsePromise;
+
+// src/hooks/useShareForwardRef.ts
+import { useEffect, useRef } from "react";
+var useShareForwardedRef = (forwardedRef, refresh = 0) => {
+  const innerRef = useRef(null);
+  useEffect(() => {
+    if (!forwardedRef) {
+      return;
+    }
+    if (typeof forwardedRef === "function") {
+      forwardedRef(innerRef.current);
+      return;
+    } else {
+      forwardedRef.current = innerRef.current;
+    }
+  }, [forwardedRef, refresh]);
+  return innerRef;
+};
+
+// src/components/BasicHero/BasicHero.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SubLinkSection = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
+  return /* @__PURE__ */ jsxs(
+    FlexGrowRow,
+    {
+      width: "100%",
+      sx: { flexDirection: { md: "row", xs: "column" }, justifyContent: { md: backgroundImageAlignment ? "flex-start" : "center", xs: "center" } },
+      children: [
+        subLinkIcon ? /* @__PURE__ */ jsxs("span", { children: [
+          subLinkIcon,
+          "\xA0"
+        ] }) : null,
+        /* @__PURE__ */ jsxs(Typography2, { children: [
+          subLinkText1,
+          "\xA0"
+        ] }),
+        /* @__PURE__ */ jsx2(LinkEx, { href: subLinkPath, underline: "always", target: "_blank", color: "inherit", children: /* @__PURE__ */ jsx2(Typography2, { children: subLinkText2 }) })
+      ]
+    }
+  );
+};
+var ButtonSection = ({ href, to, buttonText }) => {
+  const isMobile = useIsMobile();
+  return /* @__PURE__ */ jsx2(
+    ButtonEx,
+    {
+      fullWidth: true,
+      marginTop: 1,
+      marginBottom: 1,
+      marginRight: isMobile ? 2 : 1,
+      marginLeft: isMobile ? 2 : 0,
+      target: href ?? "_blank",
+      to,
+      href,
+      color: "primary",
+      variant: "contained",
+      paddingX: 3,
+      sx: { display: href || to ? "flex" : "none" },
+      children: buttonText
+    }
+  );
+};
+var BasicHero = ({
+  backgroundImage,
+  title,
+  gradientTitle,
+  backgroundColor,
+  textColor,
+  desc,
+  heroImage,
+  title2,
+  subLinkText1,
+  subLinkText2,
+  subLinkPath,
+  button1Text,
+  button2Text,
+  button2To,
+  button1To,
+  button2Href,
+  button1Href,
+  subLinkIcon,
+  sx,
+  ...props
+}) => {
+  const isMobile = useIsMobile();
+  const { classes } = useGradientStyles();
+  return /* @__PURE__ */ jsx2(
+    FlexGrowCol,
+    {
+      sx: {
+        backgroundImage: `url(${backgroundImage})`,
+        backgroundPosition: { lg: "bottom", md: "center left", xs: "top left" },
+        minHeight: {
+          md: "500px",
+          sm: "400px",
+          xs: "200px"
+        },
+        ...sx ?? {}
+      },
+      style: {
+        backgroundColor: backgroundColor ?? "",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        color: textColor ?? ""
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx2(Container, { children: /* @__PURE__ */ jsxs(
+        Grid,
+        {
+          container: true,
+          justifyContent: "center",
+          alignItems: "center",
+          sx: {
+            alignItems: { xs: "center" },
+            justifyContent: { xs: "center" }
+          },
+          children: [
+            /* @__PURE__ */ jsx2(Grid, { item: true, xs: 12, sm: 8, md: backgroundImage ? 6 : 8, lg: backgroundImage ? 6 : 8, children: /* @__PURE__ */ jsxs(FlexGrowCol, { paddingY: 2, sx: { alignItems: { xs: backgroundImage && !isMobile ? "flex-start" : "center" } }, children: [
+              /* @__PURE__ */ jsxs(Typography2, { variant: "h1", component: "h1", gutterBottom: true, textAlign: backgroundImage && !isMobile ? "left" : "center", children: [
+                title ? /* @__PURE__ */ jsx2("span", { children: `${title} ` }) : null,
+                gradientTitle ? /* @__PURE__ */ jsxs("span", { className: classes().heading, children: [
+                  " ",
+                  ` ${gradientTitle}`
+                ] }) : null,
+                title2 ? /* @__PURE__ */ jsx2("span", { children: ` ${title2}` }) : null
+              ] }),
+              /* @__PURE__ */ jsx2(Typography2, { variant: "body1", component: "h2", gutterBottom: true, textAlign: backgroundImage && !isMobile ? "left" : "center", children: desc }),
+              /* @__PURE__ */ jsxs(FlexGrowRow, { sx: { flexDirection: { lg: "row", xs: "column" } }, width: "100%", marginTop: 1, children: [
+                /* @__PURE__ */ jsx2(ButtonSection, { href: button1Href, to: button1To, buttonText: button1Text }),
+                /* @__PURE__ */ jsx2(ButtonSection, { href: button2Href, to: button2To, buttonText: button2Text })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                SubLinkSection,
+                {
+                  subLinkIcon,
+                  subLinkText1,
+                  subLinkText2,
+                  subLinkPath,
+                  backgroundImageAlignment: backgroundImage ? true : false
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx2(Grid, { item: true, xs: 12, md: 6, children: heroImage ? /* @__PURE__ */ jsx2("img", { src: heroImage, width: "100%" }) : null })
+          ]
+        }
+      ) })
+    }
+  );
+};
+
+// src/components/Ellipsize.tsx
+import { Box, styled, Typography as Typography3 } from "@mui/material";
+import { forwardRef, useCallback, useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ComponentName = "Ellipsize";
+var EllipsizeRoot = styled(Box, {
+  name: ComponentName,
+  shouldForwardProp: (prop) => prop !== "beforeLineHeight",
+  slot: "Root"
+})(({ beforeLineHeight }) => ({
+  "&": {
+    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.
+    // the pseudo element with a hidden character establishes the proper height of the content and hides it
+    ":before": {
+      content: "'nbsp;'",
+      display: "block",
+      // take the pseudo element out of the `display: block` flow so it won't push against our actual content
+      float: "left",
+      visibility: "hidden",
+      // since we are `display: block`, lineHeight is the height
+      ...beforeLineHeight && { lineHeight: beforeLineHeight }
+    }
+  }
+}));
+var EllipsizeInnerWrap = styled(Box, {
+  name: ComponentName,
+  slot: "innerWrap"
+})(() => ({
+  position: "relative"
+}));
+var EllipsizeContentWrap = styled(Typography3, {
+  name: ComponentName,
+  shouldForwardProp: (prop) => prop !== "ellipsisPosition",
+  slot: "contentWrap"
+})(({ theme, ellipsisPosition, fontFamily }) => {
+  return theme.unstable_sx({
+    fontFamily: fontFamily ?? "monospace",
+    left: 0,
+    overflow: "hidden",
+    position: "absolute",
+    right: 0,
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    ...ellipsisPosition === "start" ? {
+      direction: "rtl",
+      textAlign: "left"
+    } : {}
+  });
+});
+var useClientHeight = () => {
+  const [contentWrapHeight, setContentWrapHeight] = useState2();
+  const contentWrapRef = useCallback((node) => {
+    if (node !== null) {
+      setContentWrapHeight(node.clientHeight + "px");
+    }
+  }, []);
+  return { contentWrapHeight, contentWrapRef };
+};
+var EllipsizeBox = forwardRef(
+  ({ children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }, ref) => {
+    const { contentWrapRef, contentWrapHeight } = useClientHeight();
+    const sharedRef = useShareForwardedRef(ref);
+    return /* @__PURE__ */ jsx3(EllipsizeRoot, { beforeLineHeight: !!sharedRef && !disableSharedRef ? contentWrapHeight : void 0, ...props, ref, children: /* @__PURE__ */ jsx3(EllipsizeInnerWrap, { children: /* @__PURE__ */ jsx3(EllipsizeContentWrap, { ref: contentWrapRef, component: "span", ellipsisPosition, variant: "body2", ...typographyProps, children }) }) });
+  }
+);
+EllipsizeBox.displayName = "EllipsizeBox";
+
+// src/components/ErrorBoundary.tsx
+import { Typography as Typography4 } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+import { Component } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: void 0 };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(`${error}: ${errorInfo}`);
+  }
+  render() {
+    if (this.state.error) {
+      if (this.props.fallbackWithError) {
+        return this.props.fallbackWithError(this.state.error);
+      }
+      return this.props.fallback ?? /* @__PURE__ */ jsxs2(FlexCol, { children: [
+        /* @__PURE__ */ jsx4(Typography4, { variant: "h1", children: "Something went wrong." }),
+        /* @__PURE__ */ jsxs2(Typography4, { variant: "body1", children: [
+          "[",
+          this.state.error?.message,
+          "]"
+        ] })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/components/ListItemButtonEx.tsx
+import { ListItemButton } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
+  const navigate = useNavigate();
+  const localOnClick = (event) => {
+    onClick?.(event);
+    if (to) {
+      navigate(to, toOptions);
+    }
+  };
+  return /* @__PURE__ */ jsx5(ListItemButton, { onClick: localOnClick, ...props });
+};
+var ListItemButtonEx = ({ to, ...props }) => {
+  if (to) {
+    return /* @__PURE__ */ jsx5(ListItemButtonExTo, { to, ...props });
+  } else {
+    return /* @__PURE__ */ jsx5(ListItemButton, { ...props });
+  }
+};
+
+// src/components/LoadResult.tsx
+import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
+
+// src/components/NotFound.tsx
+import { Typography as Typography5 } from "@mui/material";
+import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var NotFound = (props) => {
+  return /* @__PURE__ */ jsxs3(FlexGrowCol2, { ...props, children: [
+    /* @__PURE__ */ jsx6(Typography5, { variant: "h2", children: "Sorry!" }),
+    /* @__PURE__ */ jsx6(Typography5, { marginY: 3, variant: "body2", children: "Can't find anything here" })
+  ] });
+};
+
+// src/components/LoadResult.tsx
+import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+function LoadResult(props) {
+  const { notFound, error, searchResult, children } = props;
+  if (notFound) {
+    return /* @__PURE__ */ jsx7(NotFound, {});
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx7(Fragment, { children });
+  }
+  if (searchResult === void 0) {
+    return /* @__PURE__ */ jsx7(FlexGrowRow2, { busy: true, minHeight: "50px" });
+  } else {
+    return /* @__PURE__ */ jsx7(Fragment, { children });
+  }
+}
+
+// src/components/Pipe.tsx
+import { Typography as Typography6 } from "@mui/material";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Pipe = (props) => {
+  return /* @__PURE__ */ jsx8(Typography6, { marginX: 1, component: "span", ...props, children: "|" });
+};
+
+// src/components/pluginValidation/DataMissing.tsx
+import { Alert, AlertTitle } from "@mui/material";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var PayloadDataMissing = ({ alertBody, ...props }) => {
+  return /* @__PURE__ */ jsxs4(Alert, { severity: "warning", ...props, children: [
+    /* @__PURE__ */ jsx9(AlertTitle, { children: "Missing Data" }),
+    alertBody ?? "Payload is missing required data to render correctly"
+  ] });
+};
+
+// src/components/ScrollTableOnSm.tsx
+import { styled as styled2 } from "@mui/material";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var StyledScrollTableOnSm = styled2("div")(({ theme }) => ({
+  [theme.breakpoints.down("md")]: {
+    overflowX: "scroll"
+  },
+  display: "flex",
+  flexGrow: 1
+}));
+var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ jsx10(StyledScrollTableOnSm, { children });
+
+// src/components/SectionSpacingRow/SectionSpacingRow.tsx
+import { useTheme as useTheme3 } from "@mui/material";
+import { FlexGrowRow as FlexGrowRow3 } from "@xylabs/react-flexbox";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SectionSpacingRow = forwardRef2(({ children, sx, ...props }, ref) => {
+  const theme = useTheme3();
+  return /* @__PURE__ */ jsx11(
+    FlexGrowRow3,
+    {
+      sx: {
+        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
+        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },
+        ...sx
+      },
+      width: "100%",
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+SectionSpacingRow.displayName = "SectionSpacingRow";
+
+// src/components/TableCell/AddressTableCell.tsx
+import { forwardRef as forwardRef4 } from "react";
+
+// src/components/TableCell/EllipsisTableCell.tsx
+import { styled as styled3, TableCell } from "@mui/material";
+import { LinkEx as LinkEx2 } from "@xylabs/react-link";
+import { forwardRef as forwardRef3, useMemo } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var EllipsisTableCellRoot = styled3(TableCell, {
+  name: "EllipsisTableCell",
+  shouldForwardProp: (prop) => prop !== "width",
+  slot: "Root"
+})(({ width = "100%" }) => ({
+  width
+}));
+var EllipsisTableCellWithRef = forwardRef3(
+  ({ children, href, link: link2 = false, to, value, ...props }, ref) => {
+    const data = useMemo(() => {
+      if (children) {
+        return children;
+      }
+      if (href || link2 || to) {
+        return /* @__PURE__ */ jsx12(LinkEx2, { title: value, to, href, target: href ? "_blank" : void 0, children: value });
+      }
+      return value;
+    }, [children, href, link2, to, value]);
+    return /* @__PURE__ */ jsx12(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ jsx12(EllipsizeBox, { sx: { cursor: link2 || to || href ? "pointer" : "inherit" }, children: data }) });
+  }
+);
+EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
+var EllipsisTableCell = EllipsisTableCellWithRef;
+
+// src/components/TableCell/AddressTableCell.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var AddressTableCell = forwardRef4(({ value, archive, exploreDomain, link: link2, ...props }, ref) => {
+  const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : void 0;
+  const to = exploreDomain === void 0 && archive ? `/archive/${archive}/address/${value}` : void 0;
+  return /* @__PURE__ */ jsx13(EllipsisTableCell, { value, href, to, ref, link: link2, ...props });
+});
+AddressTableCell.displayName = "AddressTableCell";
+
+// src/components/TableCell/HashTableCell.tsx
+import { useEvent } from "@xyo-network/react-event";
+import { useRef as useRef2 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var HashTableCell = ({ value, archive, dataType, network, exploreDomain, ...props }) => {
+  const ref = useRef2(null);
+  const [tableCellRef, dispatch] = useEvent(void 0, ref);
+  const hashPath = `/${dataType}/hash/${value}?network=${network ?? "main"}`;
+  const explorePath = archive ? `/archive/${archive}${hashPath}` : hashPath;
+  const handleCellClick = () => {
+    dispatch?.("hash", "click", value);
+  };
+  return /* @__PURE__ */ jsx14(
+    EllipsisTableCell,
+    {
+      onClick: handleCellClick,
+      ref: tableCellRef,
+      value,
+      href: exploreDomain ? `${exploreDomain}${explorePath}}` : void 0,
+      to: exploreDomain ? void 0 : explorePath,
+      ...props
+    }
+  );
+};
+
+// src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx
+import { Avatar, useTheme as useTheme4 } from "@mui/material";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ThemeTokenAvatar = ({ ...props }) => {
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsx15(Avatar, { sx: { background: theme.palette.common.white }, ...props });
+};
+
+// src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx
+import { AvatarGroup } from "@mui/material";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ThemeTokenAvatarGroup = ({ images, ...props }) => {
+  return /* @__PURE__ */ jsx16(AvatarGroup, { ...props, children: images?.map((image, index) => /* @__PURE__ */ jsx16(ThemeTokenAvatar, { src: image }, index)) });
+};
+
+// src/components/TokenBar/TokenBar.tsx
+import { Paper, Typography as Typography7 } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
+var TokenBar = ({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
+  return /* @__PURE__ */ jsx17(Paper, { elevation: 0, className: "TokenBar-root", ...props, children: /* @__PURE__ */ jsxs5(FlexRow, { justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs5(Typography7, { variant: "body1", fontWeight: 300, margin: 1, ...text1Props, children: [
+      text1,
+      text1Suffix
+    ] }),
+    /* @__PURE__ */ jsxs5(Typography7, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [
+      text2,
+      text2Suffix
+    ] })
+  ] }) });
+};
+
+// src/components/TokenData/img/index.ts
+import ada from "./components/TokenData/img/ada.png";
+import btc from "./components/TokenData/img/btc.png";
+import busd from "./components/TokenData/img/busd.png";
+import dai from "./components/TokenData/img/dai.png";
+import dogecoin from "./components/TokenData/img/dogecoin.png";
+import dot from "./components/TokenData/img/dot.png";
+import ethereum from "./components/TokenData/img/ethereum.png";
+import frax from "./components/TokenData/img/frax.png";
+import link from "./components/TokenData/img/link.png";
+import sol from "./components/TokenData/img/sol.png";
+import tether from "./components/TokenData/img/tether.png";
+import usdCoin from "./components/TokenData/img/usd-coin.png";
+import weth from "./components/TokenData/img/weth.png";
+import wrappedBtc from "./components/TokenData/img/wrapped-bitcoin.png";
+import xyo from "./components/TokenData/img/xyo.png";
+
+// src/components/TokenData/TokenData.ts
+var TokenData = [
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/multi-collateral-dai/",
+    etherscanLink: "https://etherscan.io/token/0x6b175474e89094c44da98b954eedeac495271d0f",
+    icon: dai,
+    readableName: "Dai",
+    tokenSymbol: "dai",
+    uniqueTokenId: "dai"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/weth/",
+    etherscanLink: "https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
+    icon: weth,
+    readableName: "Weth",
+    tokenSymbol: "weth",
+    uniqueTokenId: "weth"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/ethereum/",
+    etherscanLink: "n/a",
+    icon: ethereum,
+    readableName: "Ethereum",
+    tokenSymbol: "eth",
+    uniqueTokenId: "ethereum"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/bitcoin/",
+    etherscanLink: "n/a",
+    icon: btc,
+    readableName: "Bitcoin",
+    tokenSymbol: "btc",
+    uniqueTokenId: "btc"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/xyo/",
+    etherscanLink: "https://etherscan.io/token/0x55296f69f40ea6d20e478533c15a6b08b654e758",
+    icon: xyo,
+    readableName: "XYO",
+    tokenSymbol: "xyo",
+    uniqueTokenId: "xyo"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/frax/",
+    etherscanLink: "https://etherscan.io/token/0x853d955acef822db058eb8505911ed77f175b99e",
+    icon: frax,
+    readableName: "Frax",
+    tokenSymbol: "frax",
+    uniqueTokenId: "frax"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/wrapped-bitcoin/",
+    etherscanLink: "https://etherscan.io/token/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599",
+    icon: wrappedBtc,
+    readableName: "Wrapped BTC",
+    tokenSymbol: "wbtc",
+    uniqueTokenId: "wbtc"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/usd-coin/",
+    etherscanLink: "https://etherscan.io/token/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+    icon: usdCoin,
+    readableName: "USDC",
+    tokenSymbol: "usdc",
+    uniqueTokenId: "usdc"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/tether/",
+    etherscanLink: "https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7",
+    icon: tether,
+    readableName: "Tether",
+    tokenSymbol: "usdt",
+    uniqueTokenId: "usdt"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/cardano/",
+    etherscanLink: "https://etherscan.io/token/0xc14777c94229582e5758c5a79b83dde876b9be98",
+    icon: ada,
+    readableName: "Cardano",
+    tokenSymbol: "ada",
+    uniqueTokenId: "ada"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/binance-usd/",
+    etherscanLink: "https://etherscan.io/token/0x4Fabb145d64652a948d72533023f6E7A623C7C53",
+    icon: busd,
+    readableName: "Binance USD",
+    tokenSymbol: "busd",
+    uniqueTokenId: "busd"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/dogecoin/",
+    etherscanLink: "https://etherscan.io/token/0x7618b5024a6349f9aef10ddfd33e3428c734551e",
+    icon: dogecoin,
+    readableName: "Dogecoin",
+    tokenSymbol: "doge",
+    uniqueTokenId: "doge"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/polkadot-new/",
+    etherscanLink: "https://etherscan.io/token/0x2d4fb6dd969992c881d8e534c747cc925d5ba221",
+    icon: dot,
+    readableName: "Polkadot",
+    tokenSymbol: "dot",
+    uniqueTokenId: "dot"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/chainlink/",
+    etherscanLink: "https://etherscan.io/token/0x514910771af9ca656af840dff83e8264ecf986ca",
+    icon: link,
+    readableName: "ChainLink",
+    tokenSymbol: "link",
+    uniqueTokenId: "link"
+  },
+  {
+    coinmarketcapLink: "https://coinmarketcap.com/currencies/solana/",
+    etherscanLink: "https://etherscan.io/token/0x1f54638b7737193ffd86c19ec51907a7c41755d8",
+    icon: sol,
+    readableName: "Solana",
+    tokenSymbol: "sol",
+    uniqueTokenId: "sol"
+  }
+];
+
+// src/components/TokenData/useGetTokenData.tsx
+var useGetTokenData = (symbols) => {
+  return symbols?.map((symbol) => {
+    const additionalTokenData = TokenData.find((x) => x.tokenSymbol === symbol);
+    const checkedTokenData = additionalTokenData ? additionalTokenData : TokenData[0];
+    return checkedTokenData;
+  });
+};
+
+// src/components/TokenSummary/TokenSummary.tsx
+import { CardHeader, Typography as Typography8 } from "@mui/material";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+var TokenSummary = ({ icon, symbol, symbolElement, children, ...props }) => {
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx18(
+      CardHeader,
+      {
+        avatar: /* @__PURE__ */ jsx18(ThemeTokenAvatar, { src: icon, alt: symbol }),
+        title: /* @__PURE__ */ jsx18(Typography8, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbolElement ?? symbol }),
+        ...props
+      }
+    ),
+    children
+  ] });
+};
+
+// src/components/TypographyEx.tsx
+import { Typography as Typography9 } from "@mui/material";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var TypographyEx = ({ gradient, ...props }) => {
+  const { classes } = useGradientStyles();
+  return /* @__PURE__ */ jsx19(Typography9, { className: gradient === "text" ? classes().heading : void 0, ...props });
+};
+
+// src/contexts/contextEx/create.ts
+import { createContext } from "react";
+var createContextEx = () => createContext({ provided: false });
+
+// src/contexts/contextEx/use.ts
+import { useContext } from "react";
+var useContextEx = (context, contextName, required = true) => {
+  const { provided, ...props } = useContext(context);
+  if (!provided && required) {
+    throw Error(`use${contextName} can not be used outside of a ${contextName}Context when required=true`);
+  }
+  return props;
+};
+var useProvided = (context) => {
+  const { provided } = useContext(context);
+  return provided;
+};
+
+// src/contexts/diviner/Context.tsx
+var ResolvedDivinerContext = () => createContextEx();
+
+// src/contexts/diviner/Provider.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ResolvedDivinerProvider = ({ diviner: divinerProp, required = false, children, context }) => {
+  const [diviner, setDiviner] = useState3(divinerProp);
+  useEffect2(() => {
+    if (divinerProp) {
+      setDiviner(divinerProp);
+    }
+  }, [divinerProp, setDiviner]);
+  const resolveDiviner = () => {
+    if (divinerProp) {
+      return diviner === divinerProp ? diviner : void 0;
+    } else {
+      return diviner;
+    }
+  };
+  return /* @__PURE__ */ jsx20(
+    context.Provider,
+    {
+      value: {
+        diviner: resolveDiviner(),
+        provided: true,
+        setDiviner
+      },
+      children: diviner ? children : required ? null : children
+    }
+  );
+};
+
+// src/contexts/ListMode/Context.ts
+var ListModeContext = createContextEx();
+
+// src/contexts/ListMode/Provider.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var ListModeProvider = ({ children, defaultListMode }) => {
+  const [listMode, setListMode] = useState4(defaultListMode ?? "default");
+  return /* @__PURE__ */ jsx21(
+    ListModeContext.Provider,
+    {
+      value: {
+        listMode,
+        provided: true,
+        setListMode
+      },
+      children
+    }
+  );
+};
+
+// src/contexts/ListMode/use.ts
+var useListMode = (required = false) => {
+  return useContextEx(ListModeContext, "ListMode", required);
+};
+
+// src/contexts/Pixel/Context.ts
+var PixelContext = createContextEx();
+
+// src/contexts/Pixel/Provider.tsx
+import { XyPixel } from "@xylabs/pixel";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var PixelProvider = (props) => {
+  const { children, id } = props;
+  XyPixel.init(id);
+  return /* @__PURE__ */ jsx22(
+    PixelContext.Provider,
+    {
+      value: {
+        pixel: XyPixel.instance,
+        provided: true
+      },
+      children
+    }
+  );
+};
+
+// src/contexts/Pixel/use.ts
+var usePixel = (required = true) => {
+  const { pixel } = useContextEx(PixelContext, "Pixel", required);
+  return pixel;
+};
+
+// src/lib/assertDefinedEx.ts
+var assertDefinedEx = (expr, message) => {
+  if (expr !== null && expr !== void 0)
+    return expr;
+  throw Error(message);
+};
+
+// src/lib/getActualPaddingX.ts
+var parseMeausureString = (measure, absolute) => {
+  if (measure !== void 0 && measure !== null && measure.length > 0) {
+    if (measure.endsWith("px")) {
+      return parseFloat(measure.substring(0, measure.length - 2));
+    } else if (measure.endsWith("%")) {
+      if (absolute !== void 0) {
+        return parseFloat(measure.substring(0, measure.length - 1)) / 100 * absolute;
+      }
+      throw Error("Error Parsing Measure [missing absolute]");
+    } else if (measure.endsWith("vw")) {
+      return parseFloat(measure.substring(0, measure.length - 2)) / 100 * window.innerWidth;
+    } else if (measure.endsWith("vh")) {
+      return parseFloat(measure.substring(0, measure.length - 2)) / 100 * window.innerHeight;
+    }
+    throw Error(`Error Parsing Measure [${measure}]`);
+  }
+};
+var parsePadding = (padding) => {
+  const parts = padding.split(" ");
+  switch (parts.length) {
+    case 4: {
+      return {
+        bottom: parts[2],
+        left: parts[3],
+        right: parts[1],
+        top: parts[0]
+      };
+    }
+    case 3: {
+      return {
+        bottom: parts[2],
+        right: parts[1],
+        top: parts[0]
+      };
+    }
+    case 2: {
+      return {
+        bottom: parts[0],
+        left: parts[1],
+        right: parts[1],
+        top: parts[0]
+      };
+    }
+    case 1: {
+      return {
+        bottom: parts[0],
+        left: parts[0],
+        right: parts[0],
+        top: parts[0]
+      };
+    }
+  }
+};
+var getActualPaddingX = (element) => {
+  const padding = parsePadding(window.getComputedStyle(element, null).getPropertyValue("padding"));
+  const paddingLeft = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue("padding-left") ?? padding?.left, element.clientWidth) ?? 0;
+  const paddingRight = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue("padding-right") ?? padding?.right, element.clientWidth) ?? 0;
+  return paddingLeft + paddingRight;
+};
+
+// src/lib/networkComponents.tsx
+import {
+  BubbleChartRounded as BubbleChartRoundedIcon,
+  HubRounded as HubRoundedIcon,
+  InsertLinkRounded as InsertLinkRoundedIcon,
+  Inventory2Rounded as Inventory2RoundedIcon,
+  TimerRounded as TimerRoundedIcon,
+  VisibilityRounded as VisibilityRoundedIcon
+} from "@mui/icons-material";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var networkComponents = [
+  { icon: (props) => /* @__PURE__ */ jsx23(HubRoundedIcon, { ...props }), name: "Node", slug: "node" },
+  { icon: (props) => /* @__PURE__ */ jsx23(TimerRoundedIcon, { ...props }), name: "Sentinel", slug: "sentinel" },
+  { icon: (props) => /* @__PURE__ */ jsx23(InsertLinkRoundedIcon, { ...props }), name: "Bridge", slug: "bridge" },
+  { icon: (props) => /* @__PURE__ */ jsx23(Inventory2RoundedIcon, { ...props }), name: "Archivist", slug: "archivist" },
+  { icon: (props) => /* @__PURE__ */ jsx23(BubbleChartRoundedIcon, { ...props }), name: "Diviner", slug: "diviner" },
+  { icon: (props) => /* @__PURE__ */ jsx23(VisibilityRoundedIcon, { ...props }), name: "Witness", slug: "witness" }
+];
+var findNetworkComponentIndex = (slug) => {
+  return networkComponents.findIndex((info) => info.slug === slug);
+};
+var findNetworkComponent = (slug) => {
+  return networkComponents.find((info) => info.slug === slug);
+};
+export {
+  AddressTableCell,
+  Ampersand,
+  BasicHero,
+  EllipsisTableCell,
+  EllipsisTableCellWithRef,
+  EllipsizeBox,
+  ErrorBoundary,
+  HashTableCell,
+  ListItemButtonEx,
+  ListItemButtonExTo,
+  ListModeContext,
+  ListModeProvider,
+  LoadResult,
+  NotFound,
+  PayloadDataMissing,
+  Pipe,
+  PixelContext,
+  PixelProvider,
+  ResolvedDivinerContext,
+  ResolvedDivinerProvider,
+  ScrollTableOnSm,
+  SectionSpacingRow,
+  ThemeTokenAvatar,
+  ThemeTokenAvatarGroup,
+  TokenBar,
+  TokenData,
+  TokenSummary,
+  TypographyEx,
+  assertDefinedEx,
+  colorfulGradientDarkMode,
+  colorfulGradientLightMode,
+  createContextEx,
+  findNetworkComponent,
+  findNetworkComponentIndex,
+  getActualPaddingX,
+  networkComponents,
+  parseMeausureString,
+  parsePadding,
+  useContextEx,
+  useDataState,
+  useGetTokenData,
+  useGradientStyles,
+  useIsMobile,
+  useListMode,
+  useMediaQuery,
+  usePayloadHash,
+  usePayloadHashes,
+  usePixel,
+  usePromise2 as usePromise,
+  useProvided,
+  useShareForwardedRef
+};
 //# sourceMappingURL=index.js.map