@xyo-network/react-shared
Version:
Common React library for all XYO projects that use React
1,298 lines (1,254 loc) • 40.6 kB
JavaScript
// 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,
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";
// src/hooks/GradientStyles/GradientStyles.tsx
import { useIsDark } from "@xylabs/react-theme";
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 dark = useIsDark();
const styles = dark ? colorfulGradientDarkMode() : colorfulGradientLightMode();
return styles;
};
// 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 = (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)
};
};
// src/hooks/payload/usePayloadHash.tsx
import { usePromise as usePromise2 } from "@xylabs/react-promise";
import { PayloadBuilder } from "@xyo-network/payload-builder";
var usePayloadHash = (payload) => {
return usePayloadRootHash(payload);
};
var usePayloadDataHash = (payload) => {
return usePromise2(async () => payload ? await PayloadBuilder.dataHash(payload) : void 0, [payload])[0];
};
var usePayloadRootHash = (payload) => {
return usePromise2(async () => payload ? await PayloadBuilder.hash(payload) : void 0, [payload])[0];
};
var usePayloadHashes = (payloads) => {
return usePromise2(
async () => payloads ? await Promise.all(payloads.map(async (payload) => [payload, await PayloadBuilder.dataHash(payload)])) : void 0,
[payloads]
)[0];
};
// 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 = (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;
const payload = new PayloadBuilder2({ schema }).fields(fields).build();
return { payload };
} catch (error) {
return { errors: [error] };
}
}, [input]);
};
// 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 {
console.error("setDataState failed! Make sure data type is stringifiable!");
}
};
return [state, setDataState];
};
// src/hooks/useMediaQuery.ts
import { useMediaQuery } from "@mui/material";
// 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);
} 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 = useIsSmall();
return href ? /* @__PURE__ */ jsx2(
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" },
children: buttonText
}
) : to ? /* @__PURE__ */ jsx2(
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" },
children: buttonText
}
) : /* @__PURE__ */ jsx2(
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" },
children: buttonText
}
);
};
var BasicHero = ({
backgroundImage,
title,
gradientTitle,
backgroundColor,
textColor,
desc,
heroImage,
title2,
subLinkText1,
subLinkText2,
subLinkPath,
button1Text,
button2Text,
button2To,
button1To,
button2Href,
button1Href,
subLinkIcon,
sx,
...props
// eslint-disable-next-line complexity
}) => {
const isMobile = useIsSmall();
const styles = useGradientStyles();
const StyledSpan = styled("span")({ ...styles.heading });
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,
{
size: {
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(StyledSpan, { 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: [
button1Href ? /* @__PURE__ */ jsx2(ButtonSection, { href: button1Href, buttonText: button1Text }) : button1To ? /* @__PURE__ */ jsx2(ButtonSection, { to: button1To, buttonText: button1Text }) : /* @__PURE__ */ jsx2(ButtonSection, { buttonText: button1Text }),
button2Href ? /* @__PURE__ */ jsx2(ButtonSection, { href: button2Href, buttonText: button2Text }) : button2To ? /* @__PURE__ */ jsx2(ButtonSection, { to: button2To, buttonText: button2Text }) : /* @__PURE__ */ jsx2(ButtonSection, { buttonText: button2Text })
]
}
),
/* @__PURE__ */ jsx2(
SubLinkSection,
{
subLinkIcon,
subLinkText1,
subLinkText2,
subLinkPath,
backgroundImageAlignment: backgroundImage ? true : false
}
)
] })
}
),
/* @__PURE__ */ jsx2(Grid, { size: { xs: 12, md: 6 }, children: heroImage ? /* @__PURE__ */ jsx2("img", { src: heroImage, width: "100%" }) : null })
]
}
) })
}
);
};
// src/components/bigint/FixedPointPopover.tsx
import {
FormHelperText,
Popover,
TextField
} from "@mui/material";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var FixedPointPopover = ({
fixedPoint,
minFixedPoint: minimumPoint,
onFixedPointChange,
...props
}) => {
const handleChange = (event) => {
const fixedPointInteger = Number.parseInt(event.target.value, 10);
if (Number.isNaN(fixedPointInteger)) return;
onFixedPointChange?.(fixedPointInteger);
};
return /* @__PURE__ */ jsxs2(Popover, { slotProps: { paper: { sx: { p: 2 } } }, ...props, children: [
/* @__PURE__ */ jsx3(TextField, { slotProps: { htmlInput: { min: minimumPoint } }, value: fixedPoint, onChange: handleChange, type: "number" }),
/* @__PURE__ */ jsx3(FormHelperText, { children: "Set the Fixed Point" })
] });
};
// src/components/bigint/helpers/formatBigIntInput.ts
var formatBigIntInput = (rawValue) => {
const filteredValue = rawValue.replaceAll(/[^\d.]/g, "");
if (filteredValue.split(".").length > 2) return;
return filteredValue;
};
// src/components/bigint/TextField.tsx
import {
FormControl,
FormHelperText as FormHelperText2,
TextField as TextField2
} from "@mui/material";
import { toFixedPoint } from "@xylabs/decimal-precision";
import { isDefined } from "@xylabs/typeof";
import {
useEffect as useEffect2,
useMemo as useMemo2,
useState as useState3
} from "react";
// src/components/bigint/InputAdornment.tsx
import {
Avatar,
IconButton,
InputAdornment
} from "@mui/material";
import { useRef as useRef2, useState as useState2 } from "react";
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var FixedPointInputAdornment = ({
fixedPoint,
minFixedPoint,
onFixedPointChange,
...props
}) => {
const ref = useRef2(null);
const [open, setOpen] = useState2(false);
return /* @__PURE__ */ jsxs3(InputAdornment, { ...props, children: [
/* @__PURE__ */ jsx4(
FixedPointPopover,
{
anchorEl: ref.current,
anchorOrigin: { vertical: "bottom", horizontal: "left" },
fixedPoint,
minFixedPoint,
onClose: () => setOpen(false),
onFixedPointChange,
open
}
),
/* @__PURE__ */ jsx4(IconButton, { size: "small", ref, onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx4(
Avatar,
{
sx: {
fontSize: ".75rem",
height: "20px",
width: "20px"
},
children: fixedPoint
}
) })
] });
};
// src/components/bigint/TextField.tsx
import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
var BigIntTextField = ({
defaultFixedPoint = 18,
defaultRawValue,
helperText,
hideAdornment,
onChangeFixedPoint,
onChangeFormatted,
onChange,
resetValue,
...props
}) => {
const [rawValue, setRawValue] = useState3("");
const [fixedPoint, setFixedPoint] = useState3(defaultFixedPoint);
const [error, setError] = useState3();
useMemo2(() => {
setRawValue("");
}, [resetValue]);
useMemo2(() => {
if (isDefined(defaultRawValue)) {
const formattedValue = formatBigIntInput(defaultRawValue);
if (formattedValue) setRawValue(formattedValue);
}
}, [defaultRawValue]);
const handleChange = (event) => {
onChange?.(event);
const formattedValue = formatBigIntInput(event.target.value);
if (isDefined(formattedValue)) {
setRawValue(formattedValue);
onChangeFormatted?.(formattedValue);
}
};
const onFixedPointChange = (fixedPoint2) => setFixedPoint(fixedPoint2);
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__ */ jsxs4(Fragment, { children: [
/* @__PURE__ */ jsx5(
TextField2,
{
onChange: handleChange,
type: "string",
error: Boolean(error),
slotProps: {
htmlInput: { pattern: "[0-9]*[.]?[0-9]*" },
input: {
startAdornment: hideAdornment ? null : /* @__PURE__ */ jsx5(
FixedPointInputAdornment,
{
position: "start",
fixedPoint,
minFixedPoint,
onFixedPointChange
}
)
}
},
value: rawValue,
...props
}
),
/* @__PURE__ */ jsx5(FormHelperText2, { children: resolvedHelperText })
] });
};
var WithFormControl = ({ textFieldProps, ...props }) => /* @__PURE__ */ jsx5(FormControl, { ...props, children: /* @__PURE__ */ jsx5(BigIntTextField, { ...textFieldProps }) });
// 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 { jsx as jsx6 } from "react/jsx-runtime";
var ComponentName = "Ellipsize";
var EllipsizeRoot = styled2(Box, {
name: ComponentName,
shouldForwardProp: (prop) => prop !== "beforeLineHeight",
slot: "Root"
})(({ beforeLineHeight = 0 }) => ({
"&": {
// 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",
lineHeight: beforeLineHeight,
visibility: "hidden"
}
}
}));
var EllipsizeInnerWrap = styled2(Box, {
name: ComponentName,
slot: "innerWrap"
})(() => ({ position: "relative" }));
var EllipsizeContentWrap = styled2(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 EllipsizeBox = ({
ref,
innerWrapProps,
children,
ellipsisPosition = "start",
disableSharedRef,
typographyProps,
...props
}) => {
const sharedRef = useShareForwardedRef(ref);
const { sx: innerWrapSx, ...remainingInnerWrapProps } = innerWrapProps ?? {};
return /* @__PURE__ */ jsx6(EllipsizeRoot, { ref: sharedRef, ...props, children: /* @__PURE__ */ jsx6(
EllipsizeInnerWrap,
{
...remainingInnerWrapProps,
sx: {
alignItems: "center",
display: "flex",
...innerWrapSx
},
children: /* @__PURE__ */ jsx6(EllipsizeContentWrap, { component: "span", ellipsisPosition, variant: "body2", ...typographyProps, children })
}
) });
};
EllipsizeBox.displayName = "EllipsizeBox";
// src/components/LabeledTextFieldWrapper.tsx
import { Stack, Typography as Typography4 } from "@mui/material";
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
var LabeledTextFieldWrapper = ({
children,
label,
...props
}) => {
return /* @__PURE__ */ jsxs5(Stack, { flexDirection: "column", ...props, children: [
/* @__PURE__ */ jsx7(Typography4, { gutterBottom: true, variant: "caption", children: label }),
children
] });
};
// src/components/ListItemButtonEx.tsx
import { ListItemButton } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { jsx as jsx8 } from "react/jsx-runtime";
var ListItemButtonExTo = ({
to,
toOptions,
onClick,
...props
}) => {
const navigate = useNavigate();
const localOnClick = (event) => {
onClick?.(event);
if (to) {
void navigate(to, toOptions);
}
};
return /* @__PURE__ */ jsx8(ListItemButton, { onClick: localOnClick, ...props });
};
var ListItemButtonEx = ({ to, ...props }) => {
return to ? /* @__PURE__ */ jsx8(ListItemButtonExTo, { to, ...props }) : /* @__PURE__ */ jsx8(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 jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
var NotFound = (props) => {
return /* @__PURE__ */ jsxs6(FlexGrowCol2, { ...props, children: [
/* @__PURE__ */ jsx9(Typography5, { variant: "h2", children: "Sorry!" }),
/* @__PURE__ */ jsx9(Typography5, { marginY: 3, variant: "body2", children: "Can't find anything here" })
] });
};
// src/components/LoadResult.tsx
import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
function LoadResult(props) {
const {
notFound,
error,
searchResult,
children
} = props;
if (notFound) {
return /* @__PURE__ */ jsx10(NotFound, {});
}
if (error) {
return /* @__PURE__ */ jsx10(Fragment2, { children });
}
return searchResult === void 0 ? /* @__PURE__ */ jsx10(FlexGrowRow2, { busy: true, minHeight: "50px" }) : /* @__PURE__ */ jsx10(Fragment2, { children });
}
// src/components/Pipe.tsx
import { Typography as Typography6 } from "@mui/material";
import { jsx as jsx11 } from "react/jsx-runtime";
var Pipe = (props) => {
return /* @__PURE__ */ jsx11(Typography6, { marginX: 1, component: "span", ...props, children: "|" });
};
// src/components/pluginValidation/DataMissing.tsx
import { Alert, AlertTitle } from "@mui/material";
import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
var PayloadDataMissing = ({ alertBody, ...props }) => {
return /* @__PURE__ */ jsxs7(Alert, { severity: "warning", ...props, children: [
/* @__PURE__ */ jsx12(AlertTitle, { children: "Missing Data" }),
alertBody ?? "Payload is missing required data to render correctly"
] });
};
// src/components/ScrollTableOnSm.tsx
import { styled as styled3 } from "@mui/material";
import { jsx as jsx13 } from "react/jsx-runtime";
var StyledScrollTableOnSm = styled3("div")(({ theme }) => ({
[theme.breakpoints.down("md")]: { overflowX: "scroll" },
display: "flex",
flexGrow: 1
}));
var ScrollTableOnSm = ({ children }) => /* @__PURE__ */ jsx13(StyledScrollTableOnSm, { children });
// src/components/SectionSpacingRow/SectionSpacingRow.tsx
import { useTheme } from "@mui/material";
import { FlexGrowRow as FlexGrowRow3 } from "@xylabs/react-flexbox";
import { jsx as jsx14 } from "react/jsx-runtime";
var SectionSpacingRow = ({
ref,
children,
sx,
...props
}) => {
const theme = useTheme();
return /* @__PURE__ */ jsx14(
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/EllipsisTableCell.tsx
import { styled as styled4, TableCell } from "@mui/material";
import { asLinkHrefOrToProps, LinkEx as LinkEx2 } from "@xylabs/react-link";
import { useMemo as useMemo3 } from "react";
import { jsx as jsx15 } from "react/jsx-runtime";
var EllipsisTableCellRoot = styled4(TableCell, {
name: "EllipsisTableCell",
shouldForwardProp: (prop) => prop !== "width",
slot: "Root"
})(({ width = "100%" }) => ({ width }));
var EllipsisTableCellWithRef = ({
ref,
children,
href,
link = false,
to,
value,
...props
}) => {
const data = useMemo3(() => {
if (children) {
return children;
}
if (href || link || to) {
return /* @__PURE__ */ jsx15(LinkEx2, { title: value, ...asLinkHrefOrToProps({ to, href }), target: href ? "_blank" : void 0, children: value });
}
return value;
}, [children, href, link, to, value]);
return /* @__PURE__ */ jsx15(EllipsisTableCellRoot, { ...props, children: /* @__PURE__ */ jsx15(
EllipsizeBox,
{
ref,
sx: { cursor: link || to || href ? "pointer" : "inherit" },
children: data
}
) });
};
EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
var EllipsisTableCell = EllipsisTableCellWithRef;
// src/components/TableCell/AddressTableCell.tsx
import { jsx as jsx16 } from "react/jsx-runtime";
var AddressTableCell = ({
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__ */ jsx16(EllipsisTableCell, { value, href, to, ref, link, ...props });
};
AddressTableCell.displayName = "AddressTableCell";
// src/components/TableCell/HashTableCell.tsx
import { jsx as jsx17 } from "react/jsx-runtime";
var HashTableCell = ({
ref,
value,
dataType,
...props
}) => {
return /* @__PURE__ */ jsx17(
EllipsisTableCell,
{
value,
...props
}
);
};
// src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx
import { Avatar as Avatar2, useTheme as useTheme2 } from "@mui/material";
import { jsx as jsx18 } from "react/jsx-runtime";
var ThemeTokenAvatar = ({ ...props }) => {
const theme = useTheme2();
return /* @__PURE__ */ jsx18(Avatar2, { sx: { background: theme.vars.palette.common.white }, ...props });
};
// src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx
import { AvatarGroup } from "@mui/material";
import { jsx as jsx19 } from "react/jsx-runtime";
var ThemeTokenAvatarGroup = ({ images, ...props }) => {
return /* @__PURE__ */ jsx19(AvatarGroup, { ...props, children: images?.map((image, index) => /* @__PURE__ */ jsx19(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 jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
var TokenBar = ({
text1,
text1Props,
text1Suffix,
text2,
text2Props,
text2Suffix,
...props
}) => {
return /* @__PURE__ */ jsx20(Paper, { elevation: 0, className: "TokenBar-root", ...props, children: /* @__PURE__ */ jsxs8(FlexRow, { justifyContent: "space-between", children: [
/* @__PURE__ */ jsxs8(Typography7, { variant: "body1", fontWeight: 300, margin: 1, ...text1Props, children: [
text1,
text1Suffix
] }),
/* @__PURE__ */ jsxs8(Typography7, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [
text2,
text2Suffix
] })
] }) });
};
// 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 "./xl1-SFZAOI5T.png";
import { default as default17 } 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/xl1/",
etherscanLink: "https://etherscan.io/token/0xf72ae3e0da743033abd7a407557d684c1ae66aed",
icon: default16,
readableName: "XL1",
tokenSymbol: "xl1",
uniqueTokenId: "xl1"
},
{
coinmarketcapLink: "https://coinmarketcap.com/currencies/xyo/",
etherscanLink: "https://etherscan.io/token/0x55296f69f40ea6d20e478533c15a6b08b654e758",
icon: default17,
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 = (symbols) => {
return symbols?.map((symbol) => {
const additionalTokenData = TokenData.find((x) => x.tokenSymbol.toLowerCase() === symbol?.toLowerCase());
const checkedTokenData = additionalTokenData ?? {
coinmarketcapLink: "",
etherscanLink: "",
icon: "",
readableName: "Unknown Token",
tokenSymbol: "unknown",
uniqueTokenId: "unknown"
};
return checkedTokenData;
});
};
// src/components/TokenSummary/TokenSummary.tsx
import { CardHeader, Typography as Typography8 } from "@mui/material";
import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
var TokenSummary = ({
icon,
symbol,
symbolElement,
children,
...props
}) => {
return /* @__PURE__ */ jsxs9(Fragment3, { children: [
/* @__PURE__ */ jsx21(
CardHeader,
{
avatar: /* @__PURE__ */ jsx21(ThemeTokenAvatar, { src: icon, alt: symbol }),
title: /* @__PURE__ */ jsx21(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 jsx22 } from "react/jsx-runtime";
var TypographyEx = ({ gradient, ...props }) => {
const styles = useGradientStyles();
return /* @__PURE__ */ jsx22(Typography9, { style: gradient === "text" ? styles.heading : void 0, ...props });
};
// src/contexts/diviner/Context.ts
import { createContextEx } from "@xylabs/react-shared";
var ResolvedDivinerContext = () => createContextEx();
// src/contexts/diviner/Provider.tsx
import { useResetState } from "@xylabs/react-hooks";
import { useMemo as useMemo4 } from "react";
import { jsx as jsx23 } from "react/jsx-runtime";
var ResolvedDivinerProvider = ({
diviner: divinerProp,
required = false,
children,
context: Context
}) => {
const [diviner, setDiviner] = useResetState(divinerProp);
const value = useMemo4(() => {
const resolveDiviner = () => {
if (divinerProp) {
return diviner === divinerProp ? diviner : void 0;
} else {
return diviner;
}
};
return {
diviner: resolveDiviner(),
provided: true,
setDiviner
};
}, [
setDiviner,
divinerProp
]);
return /* @__PURE__ */ jsx23(
Context,
{
value,
children: diviner ? children : required ? null : children
}
);
};
// src/contexts/ListMode/Context.ts
import { createContextEx as createContextEx2 } from "@xylabs/react-shared";
var ListModeContext = createContextEx2();
// src/contexts/ListMode/Provider.tsx
import { useMemo as useMemo5, useState as useState4 } from "react";
import { jsx as jsx24 } from "react/jsx-runtime";
var ListModeProvider = ({ children, defaultListMode }) => {
const [listMode, setListMode] = useState4(defaultListMode ?? "default");
const value = useMemo5(() => ({
listMode,
provided: true,
setListMode
}), [
listMode,
setListMode
]);
return /* @__PURE__ */ jsx24(
ListModeContext,
{
value,
children
}
);
};
// src/contexts/ListMode/use.ts
import { useContextEx } from "@xylabs/react-shared";
var useListMode = (required = false) => {
return useContextEx(ListModeContext, "ListMode", required);
};
// src/lib/assertDefinedEx.ts
var assertDefinedEx = (expr, message) => {
if (expr !== null && expr !== void 0) return expr;
throw new Error(message);
};
// src/lib/getActualPaddingX.ts
var parseMeausureString = (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}]`);
}
};
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(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;
};
// 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 jsx25 } from "react/jsx-runtime";
var networkComponents = [
{
icon: (props) => /* @__PURE__ */ jsx25(HubRoundedIcon, { ...props }),
name: "Node",
slug: "node"
},
{
icon: (props) => /* @__PURE__ */ jsx25(TimerRoundedIcon, { ...props }),
name: "Sentinel",
slug: "sentinel"
},
{
icon: (props) => /* @__PURE__ */ jsx25(InsertLinkRoundedIcon, { ...props }),
name: "Bridge",
slug: "bridge"
},
{
icon: (props) => /* @__PURE__ */ jsx25(Inventory2RoundedIcon, { ...props }),
name: "Archivist",
slug: "archivist"
},
{
icon: (props) => /* @__PURE__ */ jsx25(BubbleChartRoundedIcon, { ...props }),
name: "Diviner",
slug: "diviner"
},
{
icon: (props) => /* @__PURE__ */ jsx25(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,
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,
findNetworkComponent,
findNetworkComponentIndex,
formatBigIntInput,
getActualPaddingX,
getTokenData,
networkComponents,
parseMeausureString,
parsePadding,
useDataState,
useGradientStyles,
useListMode,
useMediaQuery,
usePayloadDataHash,
usePayloadHash,
usePayloadHashes,
usePayloadRootHash,
usePayloadValidate,
useShareForwardedRef,
useValidateBoundWitness
};
//# sourceMappingURL=index.mjs.map