@xyo-network/react-shared
Version:
Common React library for all XYO projects that use React
1,278 lines (1,231 loc) • 43.4 kB
JavaScript
var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
// src/components/Ampersand.tsx
import { Typography } from "@mui/material";
import React from "react";
var Ampersand = /* @__PURE__ */ __name((props) => {
return /* @__PURE__ */ React.createElement(Typography, {
marginX: 1,
component: "span",
...props
}, "&");
}, "Ampersand");
// src/components/BasicHero/BasicHero.tsx
import { Container, Grid, styled, 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";
import { useIsSmall } from "@xylabs/react-theme";
import React2 from "react";
// src/hooks/GradientStyles/GradientStyles.tsx
import { useTheme } from "@mui/material";
var colorfulGradientLightMode = /* @__PURE__ */ __name(() => {
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"
}
};
}, "colorfulGradientLightMode");
var colorfulGradientDarkMode = /* @__PURE__ */ __name(() => {
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"
}
};
}, "colorfulGradientDarkMode");
var useGradientStyles = /* @__PURE__ */ __name(() => {
const theme = useTheme();
const styles = theme.palette.mode === "dark" ? colorfulGradientDarkMode() : colorfulGradientLightMode();
return styles;
}, "useGradientStyles");
// src/hooks/payload/useBoundWitnessValidate.tsx
import { assertEx } from "@xylabs/assert";
import { usePromise } from "@xylabs/react-promise";
import { BoundWitnessValidator } from "@xyo-network/boundwitness-validator";
import { isAnyPayload } from "@xyo-network/payload-model";
var useValidateBoundWitness = /* @__PURE__ */ __name((input) => {
const [output, validationError] = usePromise(async () => {
if (!input) return;
const object = JSON.parse(input);
const validPayload = assertEx(isAnyPayload(object) ? object : null, () => "Invalid payload");
const errors2 = await new BoundWitnessValidator(validPayload).validate();
return {
payload: validPayload,
errors: errors2
};
}, [
input
]);
const { payload, errors } = output ?? {};
return {
payload,
errors: [
validationError,
...errors ?? []
].filter((error) => !!error)
};
}, "useValidateBoundWitness");
// src/hooks/payload/usePayloadHash.tsx
import { usePromise as usePromise2 } from "@xylabs/react-promise";
import { PayloadBuilder } from "@xyo-network/payload-builder";
var usePayloadHash = /* @__PURE__ */ __name((payload) => {
return usePromise2(async () => payload ? await PayloadBuilder.dataHash(payload) : void 0, [
payload
])[0];
}, "usePayloadHash");
var usePayloadRootHash = /* @__PURE__ */ __name((payload) => {
return usePromise2(async () => payload ? await PayloadBuilder.hash(payload) : void 0, [
payload
])[0];
}, "usePayloadRootHash");
var usePayloadHashes = /* @__PURE__ */ __name((payloads) => {
return usePromise2(async () => payloads ? await Promise.all(payloads.map(async (payload) => [
payload,
await PayloadBuilder.dataHash(payload)
])) : void 0, [
payloads
])[0];
}, "usePayloadHashes");
// src/hooks/payload/usePayloadValidate.tsx
import { assertEx as assertEx2 } from "@xylabs/assert";
import { PayloadBuilder as PayloadBuilder2 } from "@xyo-network/payload-builder";
import { isAnyPayload as isAnyPayload2 } from "@xyo-network/payload-model";
import { useMemo } from "react";
var usePayloadValidate = /* @__PURE__ */ __name((input) => {
return useMemo(() => {
if (!input) return {};
try {
const object = JSON.parse(input);
const validPayload = assertEx2(isAnyPayload2(object) ? object : null, () => "Invalid payload");
const { schema, ...fields } = validPayload;
return {
payload: new PayloadBuilder2({
schema
}).fields(fields).build()
};
} catch (error) {
return {
errors: [
error
]
};
}
}, [
input
]);
}, "usePayloadValidate");
// src/hooks/useDataState.ts
import { useState } from "react";
var useDataState = /* @__PURE__ */ __name((defaultValue) => {
const [state, setState] = useState(defaultValue);
const setDataState = /* @__PURE__ */ __name((value) => {
try {
if (JSON.stringify(value) !== JSON.stringify(state)) {
setState(value);
}
} catch {
console.error("setDataState failed! Make sure data type is stringifiable!");
}
}, "setDataState");
return [
state,
setDataState
];
}, "useDataState");
// src/hooks/useMediaQuery.ts
import { useMediaQuery } from "@mui/material";
// src/hooks/useShareForwardRef.ts
import { useEffect, useRef } from "react";
var useShareForwardedRef = /* @__PURE__ */ __name((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;
}, "useShareForwardedRef");
// src/components/BasicHero/BasicHero.tsx
var SubLinkSection = /* @__PURE__ */ __name(({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
return /* @__PURE__ */ React2.createElement(FlexGrowRow, {
width: "100%",
sx: {
flexDirection: {
md: "row",
xs: "column"
},
justifyContent: {
md: backgroundImageAlignment ? "flex-start" : "center",
xs: "center"
}
}
}, subLinkIcon ? /* @__PURE__ */ React2.createElement("span", null, subLinkIcon, "\xA0") : null, /* @__PURE__ */ React2.createElement(Typography2, null, subLinkText1, "\xA0"), /* @__PURE__ */ React2.createElement(LinkEx, {
href: subLinkPath,
underline: "always",
target: "_blank",
color: "inherit"
}, /* @__PURE__ */ React2.createElement(Typography2, null, subLinkText2)));
}, "SubLinkSection");
var ButtonSection = /* @__PURE__ */ __name(({ href, to, buttonText }) => {
const isMobile = useIsSmall();
return href ? /* @__PURE__ */ React2.createElement(ButtonEx, {
fullWidth: true,
marginTop: 1,
marginBottom: 1,
marginRight: isMobile ? 2 : 1,
marginLeft: isMobile ? 2 : 0,
target: href ?? "_blank",
href,
color: "primary",
variant: "contained",
paddingX: 3,
sx: {
display: href || to ? "flex" : "none"
}
}, buttonText) : to ? /* @__PURE__ */ React2.createElement(ButtonEx, {
fullWidth: true,
marginTop: 1,
marginBottom: 1,
marginRight: isMobile ? 2 : 1,
marginLeft: isMobile ? 2 : 0,
to,
color: "primary",
variant: "contained",
paddingX: 3,
sx: {
display: href || to ? "flex" : "none"
}
}, buttonText) : /* @__PURE__ */ React2.createElement(ButtonEx, {
fullWidth: true,
marginTop: 1,
marginBottom: 1,
marginRight: isMobile ? 2 : 1,
marginLeft: isMobile ? 2 : 0,
color: "primary",
variant: "contained",
paddingX: 3,
sx: {
display: href || to ? "flex" : "none"
}
}, buttonText);
}, "ButtonSection");
var BasicHero = /* @__PURE__ */ __name(({ backgroundImage, title, gradientTitle, backgroundColor, textColor, desc, heroImage, title2, subLinkText1, subLinkText2, subLinkPath, button1Text, button2Text, button2To, button1To, button2Href, button1Href, subLinkIcon, sx, ...props }) => {
const isMobile = useIsSmall();
const styles = useGradientStyles();
const StyledSpan = styled("span")({
...styles.heading
});
return /* @__PURE__ */ React2.createElement(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
}, /* @__PURE__ */ React2.createElement(Container, null, /* @__PURE__ */ React2.createElement(Grid, {
container: true,
justifyContent: "center",
alignItems: "center",
sx: {
alignItems: {
xs: "center"
},
justifyContent: {
xs: "center"
}
}
}, /* @__PURE__ */ React2.createElement(Grid, {
size: {
xs: 12,
sm: 8,
md: backgroundImage ? 6 : 8,
lg: backgroundImage ? 6 : 8
}
}, /* @__PURE__ */ React2.createElement(FlexGrowCol, {
paddingY: 2,
sx: {
alignItems: {
xs: backgroundImage && !isMobile ? "flex-start" : "center"
}
}
}, /* @__PURE__ */ React2.createElement(Typography2, {
variant: "h1",
component: "h1",
gutterBottom: true,
textAlign: backgroundImage && !isMobile ? "left" : "center"
}, title ? /* @__PURE__ */ React2.createElement("span", null, `${title} `) : null, gradientTitle ? /* @__PURE__ */ React2.createElement(StyledSpan, null, " ", ` ${gradientTitle}`) : null, title2 ? /* @__PURE__ */ React2.createElement("span", null, ` ${title2}`) : null), /* @__PURE__ */ React2.createElement(Typography2, {
variant: "body1",
component: "h2",
gutterBottom: true,
textAlign: backgroundImage && !isMobile ? "left" : "center"
}, desc), /* @__PURE__ */ React2.createElement(FlexGrowRow, {
sx: {
flexDirection: {
lg: "row",
xs: "column"
}
},
width: "100%",
marginTop: 1
}, button1Href ? /* @__PURE__ */ React2.createElement(ButtonSection, {
href: button1Href,
buttonText: button1Text
}) : button1To ? /* @__PURE__ */ React2.createElement(ButtonSection, {
to: button1To,
buttonText: button1Text
}) : /* @__PURE__ */ React2.createElement(ButtonSection, {
buttonText: button1Text
}), button2Href ? /* @__PURE__ */ React2.createElement(ButtonSection, {
href: button2Href,
buttonText: button2Text
}) : button2To ? /* @__PURE__ */ React2.createElement(ButtonSection, {
to: button2To,
buttonText: button2Text
}) : /* @__PURE__ */ React2.createElement(ButtonSection, {
buttonText: button2Text
})), /* @__PURE__ */ React2.createElement(SubLinkSection, {
subLinkIcon,
subLinkText1,
subLinkText2,
subLinkPath,
backgroundImageAlignment: backgroundImage ? true : false
}))), /* @__PURE__ */ React2.createElement(Grid, {
size: {
xs: 12,
md: 6
}
}, heroImage ? /* @__PURE__ */ React2.createElement("img", {
src: heroImage,
width: "100%"
}) : null))));
}, "BasicHero");
// src/components/bigint/FixedPointPopover.tsx
import { FormHelperText, Popover, TextField } from "@mui/material";
import React3 from "react";
var FixedPointPopover = /* @__PURE__ */ __name(({ fixedPoint, minFixedPoint: minimumPoint, onFixedPointChange, ...props }) => {
const handleChange = /* @__PURE__ */ __name((event) => {
const fixedPointInteger = Number.parseInt(event.target.value, 10);
if (Number.isNaN(fixedPointInteger)) return;
onFixedPointChange?.(fixedPointInteger);
}, "handleChange");
return /* @__PURE__ */ React3.createElement(Popover, {
slotProps: {
paper: {
sx: {
p: 2
}
}
},
...props
}, /* @__PURE__ */ React3.createElement(TextField, {
slotProps: {
htmlInput: {
min: minimumPoint
}
},
value: fixedPoint,
onChange: handleChange,
type: "number"
}), /* @__PURE__ */ React3.createElement(FormHelperText, null, "Set the Fixed Point"));
}, "FixedPointPopover");
// src/components/bigint/TextField.tsx
import { FormControl, FormHelperText as FormHelperText2, TextField as TextField2 } from "@mui/material";
import { toFixedPoint } from "@xylabs/decimal-precision";
import React5, { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
// src/components/bigint/InputAdornment.tsx
import { Avatar, IconButton, InputAdornment } from "@mui/material";
import React4, { useRef as useRef2, useState as useState2 } from "react";
var FixedPointInputAdornment = /* @__PURE__ */ __name(({ fixedPoint, minFixedPoint, onFixedPointChange, ...props }) => {
const ref = useRef2(null);
const [open, setOpen] = useState2(false);
return /* @__PURE__ */ React4.createElement(InputAdornment, props, /* @__PURE__ */ React4.createElement(FixedPointPopover, {
anchorEl: ref.current,
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
fixedPoint,
minFixedPoint,
onClose: /* @__PURE__ */ __name(() => setOpen(false), "onClose"),
onFixedPointChange,
open
}), /* @__PURE__ */ React4.createElement(IconButton, {
size: "small",
ref,
onClick: /* @__PURE__ */ __name(() => setOpen(!open), "onClick")
}, /* @__PURE__ */ React4.createElement(Avatar, {
sx: {
fontSize: ".75rem",
height: "20px",
width: "20px"
}
}, fixedPoint)));
}, "FixedPointInputAdornment");
// src/components/bigint/TextField.tsx
var BigIntTextField = /* @__PURE__ */ __name(({ defaultFixedPoint = 18, defaultRawValue, helperText, hideAdornment, onChangeFixedPoint, onChange, resetValue, ...props }) => {
const [rawValue, setRawValue] = useState3("");
const [fixedPoint, setFixedPoint] = useState3(defaultFixedPoint);
const [error, setError] = useState3();
useMemo2(() => {
setRawValue("");
}, [
resetValue
]);
const handleRawValueChange = /* @__PURE__ */ __name((rawValue2) => {
const filteredValue = rawValue2.replaceAll(/[^\d.]/g, "");
if (filteredValue.split(".").length > 2) return;
setRawValue(filteredValue);
}, "handleRawValueChange");
useMemo2(() => {
if (defaultRawValue) {
handleRawValueChange(defaultRawValue);
}
}, [
defaultRawValue
]);
const handleChange = /* @__PURE__ */ __name((event) => {
onChange?.(event);
handleRawValueChange(event.target.value);
}, "handleChange");
const onFixedPointChange = /* @__PURE__ */ __name((fixedPoint2) => setFixedPoint(fixedPoint2), "onFixedPointChange");
const bigIntValue = useMemo2(() => {
if (rawValue) {
const fixedValue = toFixedPoint(rawValue, fixedPoint);
setError(void 0);
try {
return fixedValue;
} catch (e) {
console.error(e);
setError(e);
return;
}
} else {
return;
}
}, [
rawValue,
fixedPoint
]);
useEffect2(() => {
onChangeFixedPoint?.(bigIntValue);
}, [
bigIntValue
]);
const minFixedPoint = rawValue.split(".")[1]?.length;
const resolvedHelperText = useMemo2(() => {
if (error) return "Cannot convert to BigInt";
return helperText ?? "Enter a number";
}, [
helperText,
error
]);
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(TextField2, {
onChange: handleChange,
type: "string",
error: Boolean(error),
slotProps: {
htmlInput: {
pattern: "[0-9]*[.]?[0-9]*"
},
input: {
startAdornment: hideAdornment ? null : /* @__PURE__ */ React5.createElement(FixedPointInputAdornment, {
position: "start",
fixedPoint,
minFixedPoint,
onFixedPointChange
})
}
},
value: rawValue,
...props
}), /* @__PURE__ */ React5.createElement(FormHelperText2, null, resolvedHelperText));
}, "BigIntTextField");
var WithFormControl = /* @__PURE__ */ __name(({ textFieldProps, ...props }) => /* @__PURE__ */ React5.createElement(FormControl, props, /* @__PURE__ */ React5.createElement(BigIntTextField, textFieldProps)), "WithFormControl");
// src/components/bigint/Input.ts
var BigIntInput = {
TextField: BigIntTextField,
WithFormControl
};
// src/components/Ellipsize.tsx
import { Box, styled as styled2, Typography as Typography3 } from "@mui/material";
import React6, { useCallback, useState as useState4 } from "react";
var ComponentName = "Ellipsize";
var EllipsizeRoot = styled2(Box, {
name: ComponentName,
shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "beforeLineHeight", "shouldForwardProp"),
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 = styled2(Box, {
name: ComponentName,
slot: "innerWrap"
})(() => ({
position: "relative"
}));
var EllipsizeContentWrap = styled2(Typography3, {
name: ComponentName,
shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "ellipsisPosition", "shouldForwardProp"),
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 = /* @__PURE__ */ __name(() => {
const [contentWrapHeight, setContentWrapHeight] = useState4();
const contentWrapRef = useCallback((node) => {
if (node !== null) {
setContentWrapHeight(node.clientHeight + "px");
}
}, []);
return {
contentWrapHeight,
contentWrapRef
};
}, "useClientHeight");
var EllipsizeBox = /* @__PURE__ */ __name(({ ref, children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }) => {
const { contentWrapRef, contentWrapHeight } = useClientHeight();
const sharedRef = useShareForwardedRef(ref);
return /* @__PURE__ */ React6.createElement(EllipsizeRoot, {
beforeLineHeight: !!sharedRef && !disableSharedRef ? contentWrapHeight : void 0,
...props,
ref: sharedRef
}, /* @__PURE__ */ React6.createElement(EllipsizeInnerWrap, null, /* @__PURE__ */ React6.createElement(EllipsizeContentWrap, {
ref: contentWrapRef,
component: "span",
ellipsisPosition,
variant: "body2",
...typographyProps
}, children)));
}, "EllipsizeBox");
EllipsizeBox.displayName = "EllipsizeBox";
// src/components/LabeledTextFieldWrapper.tsx
import { Stack, Typography as Typography4 } from "@mui/material";
import React7 from "react";
var LabeledTextFieldWrapper = /* @__PURE__ */ __name(({ children, label, ...props }) => {
return /* @__PURE__ */ React7.createElement(Stack, {
flexDirection: "column",
...props
}, /* @__PURE__ */ React7.createElement(Typography4, {
gutterBottom: true,
variant: "caption"
}, label), children);
}, "LabeledTextFieldWrapper");
// src/components/ListItemButtonEx.tsx
import { ListItemButton } from "@mui/material";
import React8 from "react";
import { useNavigate } from "react-router-dom";
var ListItemButtonExTo = /* @__PURE__ */ __name(({ to, toOptions, onClick, ...props }) => {
const navigate = useNavigate();
const localOnClick = /* @__PURE__ */ __name((event) => {
onClick?.(event);
if (to) {
void navigate(to, toOptions);
}
}, "localOnClick");
return /* @__PURE__ */ React8.createElement(ListItemButton, {
onClick: localOnClick,
...props
});
}, "ListItemButtonExTo");
var ListItemButtonEx = /* @__PURE__ */ __name(({ to, ...props }) => {
return to ? /* @__PURE__ */ React8.createElement(ListItemButtonExTo, {
to,
...props
}) : /* @__PURE__ */ React8.createElement(ListItemButton, props);
}, "ListItemButtonEx");
// src/components/LoadResult.tsx
import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
import React10 from "react";
// src/components/NotFound.tsx
import { Typography as Typography5 } from "@mui/material";
import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
import React9 from "react";
var NotFound = /* @__PURE__ */ __name((props) => {
return /* @__PURE__ */ React9.createElement(FlexGrowCol2, props, /* @__PURE__ */ React9.createElement(Typography5, {
variant: "h2"
}, "Sorry!"), /* @__PURE__ */ React9.createElement(Typography5, {
marginY: 3,
variant: "body2"
}, "Can't find anything here"));
}, "NotFound");
// src/components/LoadResult.tsx
function LoadResult(props) {
const { notFound, error, searchResult, children } = props;
if (notFound) {
return /* @__PURE__ */ React10.createElement(NotFound, null);
}
if (error) {
return /* @__PURE__ */ React10.createElement(React10.Fragment, null, children);
}
return searchResult === void 0 ? /* @__PURE__ */ React10.createElement(FlexGrowRow2, {
busy: true,
minHeight: "50px"
}) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, children);
}
__name(LoadResult, "LoadResult");
// src/components/Pipe.tsx
import { Typography as Typography6 } from "@mui/material";
import React11 from "react";
var Pipe = /* @__PURE__ */ __name((props) => {
return /* @__PURE__ */ React11.createElement(Typography6, {
marginX: 1,
component: "span",
...props
}, "|");
}, "Pipe");
// src/components/pluginValidation/DataMissing.tsx
import { Alert, AlertTitle } from "@mui/material";
import React12 from "react";
var PayloadDataMissing = /* @__PURE__ */ __name(({ alertBody, ...props }) => {
return /* @__PURE__ */ React12.createElement(Alert, {
severity: "warning",
...props
}, /* @__PURE__ */ React12.createElement(AlertTitle, null, "Missing Data"), alertBody ?? "Payload is missing required data to render correctly");
}, "PayloadDataMissing");
// src/components/ScrollTableOnSm.tsx
import { styled as styled3 } from "@mui/material";
import React13 from "react";
var StyledScrollTableOnSm = styled3("div")(({ theme }) => ({
[theme.breakpoints.down("md")]: {
overflowX: "scroll"
},
display: "flex",
flexGrow: 1
}));
var ScrollTableOnSm = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ React13.createElement(StyledScrollTableOnSm, null, children), "ScrollTableOnSm");
// src/components/SectionSpacingRow/SectionSpacingRow.tsx
import { useTheme as useTheme2 } from "@mui/material";
import { FlexGrowRow as FlexGrowRow3 } from "@xylabs/react-flexbox";
import React14 from "react";
var SectionSpacingRow = /* @__PURE__ */ __name(({ ref, children, sx, ...props }) => {
const theme = useTheme2();
return /* @__PURE__ */ React14.createElement(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");
SectionSpacingRow.displayName = "SectionSpacingRow";
// src/components/TableCell/AddressTableCell.tsx
import React16 from "react";
// src/components/TableCell/EllipsisTableCell.tsx
import { styled as styled4, TableCell } from "@mui/material";
import { asLinkHrefOrToProps, LinkEx as LinkEx2 } from "@xylabs/react-link";
import React15, { useMemo as useMemo3 } from "react";
var EllipsisTableCellRoot = styled4(TableCell, {
name: "EllipsisTableCell",
shouldForwardProp: /* @__PURE__ */ __name((prop) => prop !== "width", "shouldForwardProp"),
slot: "Root"
})(({ width = "100%" }) => ({
width
}));
var EllipsisTableCellWithRef = /* @__PURE__ */ __name(({ ref, children, href, link = false, to, value, ...props }) => {
const data = useMemo3(() => {
if (children) {
return children;
}
if (href || link || to) {
return /* @__PURE__ */ React15.createElement(LinkEx2, {
title: value,
...asLinkHrefOrToProps({
to,
href
}),
target: href ? "_blank" : void 0
}, value);
}
return value;
}, [
children,
href,
link,
to,
value
]);
return /* @__PURE__ */ React15.createElement(EllipsisTableCellRoot, props, /* @__PURE__ */ React15.createElement(EllipsizeBox, {
ref,
sx: {
cursor: link || to || href ? "pointer" : "inherit"
}
}, data));
}, "EllipsisTableCellWithRef");
EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
var EllipsisTableCell = EllipsisTableCellWithRef;
// src/components/TableCell/AddressTableCell.tsx
var AddressTableCell = /* @__PURE__ */ __name(({ ref, value, archive, exploreDomain, link, ...props }) => {
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__ */ React16.createElement(EllipsisTableCell, {
value,
href,
to,
ref,
link,
...props
});
}, "AddressTableCell");
AddressTableCell.displayName = "AddressTableCell";
// src/components/TableCell/HashTableCell.tsx
import { useEvent } from "@xyo-network/react-event";
import React17, { useRef as useRef3 } from "react";
var HashTableCell = /* @__PURE__ */ __name(({ value, archive, dataType, network, exploreDomain, onHashClick, ...props }) => {
const ref = useRef3(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 = /* @__PURE__ */ __name(() => {
if (onHashClick) {
onHashClick(value);
} else {
dispatch?.("hash", "click", value);
}
}, "handleCellClick");
return /* @__PURE__ */ React17.createElement(EllipsisTableCell, {
onClick: handleCellClick,
ref: tableCellRef,
value,
href: exploreDomain ? `${exploreDomain}${explorePath}}` : void 0,
to: exploreDomain ? void 0 : explorePath,
...props
});
}, "HashTableCell");
// src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx
import { Avatar as Avatar2, useTheme as useTheme3 } from "@mui/material";
import React18 from "react";
var ThemeTokenAvatar = /* @__PURE__ */ __name(({ ...props }) => {
const theme = useTheme3();
return /* @__PURE__ */ React18.createElement(Avatar2, {
sx: {
background: theme.palette.common.white
},
...props
});
}, "ThemeTokenAvatar");
// src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx
import { AvatarGroup } from "@mui/material";
import React19 from "react";
var ThemeTokenAvatarGroup = /* @__PURE__ */ __name(({ images, ...props }) => {
return /* @__PURE__ */ React19.createElement(AvatarGroup, props, images?.map((image, index) => /* @__PURE__ */ React19.createElement(ThemeTokenAvatar, {
key: index,
src: image
})));
}, "ThemeTokenAvatarGroup");
// src/components/TokenBar/TokenBar.tsx
import { Paper, Typography as Typography7 } from "@mui/material";
import { FlexRow } from "@xylabs/react-flexbox";
import React20 from "react";
var TokenBar = /* @__PURE__ */ __name(({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
return /* @__PURE__ */ React20.createElement(Paper, {
elevation: 0,
className: "TokenBar-root",
...props
}, /* @__PURE__ */ React20.createElement(FlexRow, {
justifyContent: "space-between"
}, /* @__PURE__ */ React20.createElement(Typography7, {
variant: "body1",
fontWeight: 300,
margin: 1,
...text1Props
}, text1, text1Suffix), /* @__PURE__ */ React20.createElement(Typography7, {
variant: "body1",
fontWeight: 300,
textTransform: "uppercase",
color: "gray",
margin: 1,
...text2Props
}, text2, text2Suffix)));
}, "TokenBar");
// src/components/TokenData/img/index.ts
import { default as default2 } from "./ada-JCPSRXND.png";
import { default as default3 } from "./btc-SRW7TEQV.png";
import { default as default4 } from "./busd-RAN4SWCI.png";
import { default as default5 } from "./dai-FZSM2RYY.png";
import { default as default6 } from "./dogecoin-QOIF7Q5M.png";
import { default as default7 } from "./dot-P5Z7IW2O.png";
import { default as default8 } from "./ethereum-3SLTXYTT.png";
import { default as default9 } from "./frax-TQDXCCOP.png";
import { default as default10 } from "./link-THYNVLXG.png";
import { default as default11 } from "./sol-A4J5S4EN.png";
import { default as default12 } from "./tether-3X63FB23.png";
import { default as default13 } from "./usd-coin-UCS44T5B.png";
import { default as default14 } from "./weth-HDGYDSJB.png";
import { default as default15 } from "./wrapped-bitcoin-TS5QFJLK.png";
import { default as default16 } from "./xyo-RLMLL56X.png";
// src/components/TokenData/TokenData.ts
var TokenData = [
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/multi-collateral-dai/",
etherscanLink: "https://etherscan.io/token/0x6b175474e89094c44da98b954eedeac495271d0f",
icon: default5,
readableName: "Dai",
tokenSymbol: "dai",
uniqueTokenId: "dai"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/weth/",
etherscanLink: "https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
icon: default14,
readableName: "Weth",
tokenSymbol: "weth",
uniqueTokenId: "weth"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/ethereum/",
etherscanLink: "n/a",
icon: default8,
readableName: "Ethereum",
tokenSymbol: "eth",
uniqueTokenId: "ethereum"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/bitcoin/",
etherscanLink: "n/a",
icon: default3,
readableName: "Bitcoin",
tokenSymbol: "btc",
uniqueTokenId: "btc"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/xyo/",
etherscanLink: "https://etherscan.io/token/0x55296f69f40ea6d20e478533c15a6b08b654e758",
icon: default16,
readableName: "XYO",
tokenSymbol: "xyo",
uniqueTokenId: "xyo"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/frax/",
etherscanLink: "https://etherscan.io/token/0x853d955acef822db058eb8505911ed77f175b99e",
icon: default9,
readableName: "Frax",
tokenSymbol: "frax",
uniqueTokenId: "frax"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/wrapped-bitcoin/",
etherscanLink: "https://etherscan.io/token/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599",
icon: default15,
readableName: "Wrapped BTC",
tokenSymbol: "wbtc",
uniqueTokenId: "wbtc"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/usd-coin/",
etherscanLink: "https://etherscan.io/token/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
icon: default13,
readableName: "USDC",
tokenSymbol: "usdc",
uniqueTokenId: "usdc"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/tether/",
etherscanLink: "https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7",
icon: default12,
readableName: "Tether",
tokenSymbol: "usdt",
uniqueTokenId: "usdt"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/cardano/",
etherscanLink: "https://etherscan.io/token/0xc14777c94229582e5758c5a79b83dde876b9be98",
icon: default2,
readableName: "Cardano",
tokenSymbol: "ada",
uniqueTokenId: "ada"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/binance-usd/",
etherscanLink: "https://etherscan.io/token/0x4Fabb145d64652a948d72533023f6E7A623C7C53",
icon: default4,
readableName: "Binance USD",
tokenSymbol: "busd",
uniqueTokenId: "busd"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/dogecoin/",
etherscanLink: "https://etherscan.io/token/0x7618b5024a6349f9aef10ddfd33e3428c734551e",
icon: default6,
readableName: "Dogecoin",
tokenSymbol: "doge",
uniqueTokenId: "doge"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/polkadot-new/",
etherscanLink: "https://etherscan.io/token/0x2d4fb6dd969992c881d8e534c747cc925d5ba221",
icon: default7,
readableName: "Polkadot",
tokenSymbol: "dot",
uniqueTokenId: "dot"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/chainlink/",
etherscanLink: "https://etherscan.io/token/0x514910771af9ca656af840dff83e8264ecf986ca",
icon: default10,
readableName: "ChainLink",
tokenSymbol: "link",
uniqueTokenId: "link"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/solana/",
etherscanLink: "https://etherscan.io/token/0x1f54638b7737193ffd86c19ec51907a7c41755d8",
icon: default11,
readableName: "Solana",
tokenSymbol: "sol",
uniqueTokenId: "sol"
}
];
// src/components/TokenData/useGetTokenData.tsx
var getTokenData = /* @__PURE__ */ __name((symbols) => {
return symbols?.map((symbol) => {
const additionalTokenData = TokenData.find((x) => x.tokenSymbol === symbol);
const checkedTokenData = additionalTokenData ?? TokenData[0];
return checkedTokenData;
});
}, "getTokenData");
// src/components/TokenSummary/TokenSummary.tsx
import { CardHeader, Typography as Typography8 } from "@mui/material";
import React21 from "react";
var TokenSummary = /* @__PURE__ */ __name(({ icon, symbol, symbolElement, children, ...props }) => {
return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(CardHeader, {
avatar: /* @__PURE__ */ React21.createElement(ThemeTokenAvatar, {
src: icon,
alt: symbol
}),
title: /* @__PURE__ */ React21.createElement(Typography8, {
variant: "h6",
fontWeight: 300,
textTransform: "uppercase"
}, symbolElement ?? symbol),
...props
}), children);
}, "TokenSummary");
// src/components/TypographyEx.tsx
import { Typography as Typography9 } from "@mui/material";
import React22 from "react";
var TypographyEx = /* @__PURE__ */ __name(({ gradient, ...props }) => {
const styles = useGradientStyles();
return /* @__PURE__ */ React22.createElement(Typography9, {
style: gradient === "text" ? styles.heading : void 0,
...props
});
}, "TypographyEx");
// src/contexts/contextEx/create.ts
import { createContext } from "react";
var createContextEx = /* @__PURE__ */ __name(() => createContext({
provided: false
}), "createContextEx");
// src/contexts/contextEx/use.ts
import { use } from "react";
var useContextEx = /* @__PURE__ */ __name((context, contextName, required = true) => {
const { provided, ...props } = use(context);
if (!provided && required) {
throw new Error(`use${contextName} can not be used outside of a ${contextName}Context when required=true`);
}
return props;
}, "useContextEx");
var useProvided = /* @__PURE__ */ __name((context) => {
const { provided } = use(context);
return provided;
}, "useProvided");
// src/contexts/diviner/Context.ts
var ResolvedDivinerContext = /* @__PURE__ */ __name(() => createContextEx(), "ResolvedDivinerContext");
// src/contexts/diviner/Provider.tsx
import { useResetState } from "@xylabs/react-hooks";
import React23, { useMemo as useMemo4 } from "react";
var ResolvedDivinerProvider = /* @__PURE__ */ __name(({ diviner: divinerProp, required = false, children, context: Context }) => {
const [diviner, setDiviner] = useResetState(divinerProp);
const value = useMemo4(() => {
const resolveDiviner = /* @__PURE__ */ __name(() => {
if (divinerProp) {
return diviner === divinerProp ? diviner : void 0;
} else {
return diviner;
}
}, "resolveDiviner");
return {
diviner: resolveDiviner(),
provided: true,
setDiviner
};
}, [
setDiviner,
divinerProp
]);
return /* @__PURE__ */ React23.createElement(Context, {
value
}, diviner ? children : required ? null : children);
}, "ResolvedDivinerProvider");
// src/contexts/ListMode/Context.ts
var ListModeContext = createContextEx();
// src/contexts/ListMode/Provider.tsx
import React24, { useMemo as useMemo5, useState as useState5 } from "react";
var ListModeProvider = /* @__PURE__ */ __name(({ children, defaultListMode }) => {
const [listMode, setListMode] = useState5(defaultListMode ?? "default");
const value = useMemo5(() => ({
listMode,
provided: true,
setListMode
}), [
listMode,
setListMode
]);
return /* @__PURE__ */ React24.createElement(ListModeContext, {
value
}, children);
}, "ListModeProvider");
// src/contexts/ListMode/use.ts
var useListMode = /* @__PURE__ */ __name((required = false) => {
return useContextEx(ListModeContext, "ListMode", required);
}, "useListMode");
// src/lib/assertDefinedEx.ts
var assertDefinedEx = /* @__PURE__ */ __name((expr, message) => {
if (expr !== null && expr !== void 0) return expr;
throw new Error(message);
}, "assertDefinedEx");
// src/lib/getActualPaddingX.ts
var parseMeausureString = /* @__PURE__ */ __name((measure, absolute) => {
if (measure !== void 0 && measure !== null && measure.length > 0) {
if (measure.endsWith("px")) {
return Number.parseFloat(measure.slice(0, Math.max(0, measure.length - 2)));
} else if (measure.endsWith("%")) {
if (absolute !== void 0) {
return Number.parseFloat(measure.slice(0, Math.max(0, measure.length - 1))) / 100 * absolute;
}
throw new Error("Error Parsing Measure [missing absolute]");
} else if (measure.endsWith("vw")) {
return Number.parseFloat(measure.slice(0, Math.max(0, measure.length - 2))) / 100 * window.innerWidth;
} else if (measure.endsWith("vh")) {
return Number.parseFloat(measure.slice(0, Math.max(0, measure.length - 2))) / 100 * window.innerHeight;
}
throw new Error(`Error Parsing Measure [${measure}]`);
}
}, "parseMeausureString");
var parsePadding = /* @__PURE__ */ __name((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]
};
}
}
}, "parsePadding");
var getActualPaddingX = /* @__PURE__ */ __name((element) => {
const padding = parsePadding(globalThis.getComputedStyle(element, null).getPropertyValue("padding"));
const paddingLeft = parseMeausureString(globalThis.getComputedStyle(element, null).getPropertyValue("padding-left") ?? padding?.left, element.clientWidth) ?? 0;
const paddingRight = parseMeausureString(globalThis.getComputedStyle(element, null).getPropertyValue("padding-right") ?? padding?.right, element.clientWidth) ?? 0;
return paddingLeft + paddingRight;
}, "getActualPaddingX");
// 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 React25 from "react";
var networkComponents = [
{
icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(HubRoundedIcon, props), "icon"),
name: "Node",
slug: "node"
},
{
icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(TimerRoundedIcon, props), "icon"),
name: "Sentinel",
slug: "sentinel"
},
{
icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(InsertLinkRoundedIcon, props), "icon"),
name: "Bridge",
slug: "bridge"
},
{
icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(Inventory2RoundedIcon, props), "icon"),
name: "Archivist",
slug: "archivist"
},
{
icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(BubbleChartRoundedIcon, props), "icon"),
name: "Diviner",
slug: "diviner"
},
{
icon: /* @__PURE__ */ __name((props) => /* @__PURE__ */ React25.createElement(VisibilityRoundedIcon, props), "icon"),
name: "Witness",
slug: "witness"
}
];
var findNetworkComponentIndex = /* @__PURE__ */ __name((slug) => {
return networkComponents.findIndex((info) => info.slug === slug);
}, "findNetworkComponentIndex");
var findNetworkComponent = /* @__PURE__ */ __name((slug) => {
return networkComponents.find((info) => info.slug === slug);
}, "findNetworkComponent");
export {
AddressTableCell,
Ampersand,
BasicHero,
BigIntInput,
BigIntTextField,
EllipsisTableCell,
EllipsisTableCellWithRef,
EllipsizeBox,
FixedPointInputAdornment,
FixedPointPopover,
HashTableCell,
LabeledTextFieldWrapper,
ListItemButtonEx,
ListItemButtonExTo,
ListModeContext,
ListModeProvider,
LoadResult,
NotFound,
PayloadDataMissing,
Pipe,
ResolvedDivinerContext,
ResolvedDivinerProvider,
ScrollTableOnSm,
SectionSpacingRow,
ThemeTokenAvatar,
ThemeTokenAvatarGroup,
TokenBar,
TokenData,
TokenSummary,
TypographyEx,
WithFormControl,
assertDefinedEx,
colorfulGradientDarkMode,
colorfulGradientLightMode,
createContextEx,
findNetworkComponent,
findNetworkComponentIndex,
getActualPaddingX,
getTokenData,
networkComponents,
parseMeausureString,
parsePadding,
useContextEx,
useDataState,
useGradientStyles,
useListMode,
useMediaQuery,
usePayloadHash,
usePayloadHashes,
usePayloadRootHash,
usePayloadValidate,
useProvided,
useShareForwardedRef,
useValidateBoundWitness
};
//# sourceMappingURL=index.mjs.map