@xyo-network/react-shared

Version:

Common React library for all XYO projects that use React

1 lines • 74.6 kB

Source Map (JSON)

{"version":3,"sources":["../../src/components/Ampersand.tsx","../../src/components/BasicHero/BasicHero.tsx","../../src/hooks/GradientStyles/GradientStyles.tsx","../../src/hooks/payload/useBoundWitnessValidate.tsx","../../src/hooks/payload/usePayloadHash.tsx","../../src/hooks/payload/usePayloadValidate.tsx","../../src/hooks/useDataState.ts","../../src/hooks/useMediaQuery.ts","../../src/hooks/useShareForwardRef.ts","../../src/components/bigint/FixedPointPopover.tsx","../../src/components/bigint/helpers/formatBigIntInput.ts","../../src/components/bigint/TextField.tsx","../../src/components/bigint/InputAdornment.tsx","../../src/components/bigint/Input.ts","../../src/components/Ellipsize.tsx","../../src/components/LabeledTextFieldWrapper.tsx","../../src/components/ListItemButtonEx.tsx","../../src/components/LoadResult.tsx","../../src/components/NotFound.tsx","../../src/components/Pipe.tsx","../../src/components/pluginValidation/DataMissing.tsx","../../src/components/ScrollTableOnSm.tsx","../../src/components/SectionSpacingRow/SectionSpacingRow.tsx","../../src/components/TableCell/EllipsisTableCell.tsx","../../src/components/TableCell/AddressTableCell.tsx","../../src/components/TableCell/HashTableCell.tsx","../../src/components/ThemeTokenAvatar/ThemeTokenAvatar.tsx","../../src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.tsx","../../src/components/TokenBar/TokenBar.tsx","../../src/components/TokenData/img/index.ts","../../src/components/TokenData/TokenData.ts","../../src/components/TokenData/useGetTokenData.tsx","../../src/components/TokenSummary/TokenSummary.tsx","../../src/components/TypographyEx.tsx","../../src/contexts/diviner/Context.ts","../../src/contexts/diviner/Provider.tsx","../../src/contexts/ListMode/Context.ts","../../src/contexts/ListMode/Provider.tsx","../../src/contexts/ListMode/use.ts","../../src/lib/assertDefinedEx.ts","../../src/lib/getActualPaddingX.ts","../../src/lib/networkComponents.tsx"],"sourcesContent":["import type { TypographyProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport React from 'react'\n\nexport const Ampersand: React.FC<TypographyProps> = (props) => {\n return (\n <Typography marginX={1} component=\"span\" {...props}>\n &\n </Typography>\n )\n}\n","import {\n Container, Grid, styled, Typography,\n} from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { LinkEx } from '@xylabs/react-link'\nimport { useIsSmall } from '@xylabs/react-theme'\nimport type { ReactElement } from 'react'\nimport React from 'react'\nimport type { To } from 'react-router-dom'\n\nimport { useGradientStyles } from '../../hooks/index.ts'\n\nexport interface BasicHeroProps extends FlexBoxProps {\n backgroundColor?: string\n backgroundImage?: string\n button1Href?: string\n button1Text?: string\n button1To?: string\n button2Href?: string\n button2Text?: string\n button2To?: string\n desc: string\n gradientTitle?: string\n heroImage?: string\n subLinkIcon?: ReactElement\n subLinkPath?: string\n subLinkText1?: string\n subLinkText2?: string\n sx?: Record<string, string>\n textColor?: string\n title: string\n title2?: string\n}\n\ninterface SubLinkSectionProps {\n backgroundImageAlignment?: boolean\n subLinkIcon?: ReactElement\n subLinkPath?: string\n subLinkText1?: string\n subLinkText2?: string\n}\n\ninterface ButtonSectionBaseProps {\n buttonText?: string\n}\n\ninterface ButtonSectionHrefProps extends ButtonSectionBaseProps {\n href?: string\n to?: never\n}\n\ninterface ButtonSectionToProps extends ButtonSectionBaseProps {\n href?: never\n to?: To\n}\n\ninterface ButtonSectionClickProps extends ButtonSectionBaseProps {\n href?: never\n to?: never\n}\n\ntype ButtonSectionProps = ButtonSectionHrefProps | ButtonSectionToProps | ButtonSectionClickProps\n\nconst SubLinkSection: React.FC<SubLinkSectionProps> = ({\n backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2,\n}) => {\n return (\n <FlexGrowRow\n width=\"100%\"\n sx={{\n flexDirection: { md: 'row', xs: 'column' },\n justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' },\n }}\n >\n {subLinkIcon\n ? (\n \n {subLinkIcon}\n \n \n )\n : null}\n <Typography>\n {subLinkText1}\n \n </Typography>\n <LinkEx href={subLinkPath} underline=\"always\" target=\"_blank\" color=\"inherit\">\n <Typography>{subLinkText2}</Typography>\n </LinkEx>\n </FlexGrowRow>\n )\n}\n\nconst ButtonSection: React.FC<ButtonSectionProps> = ({\n href, to, buttonText,\n}) => {\n const isMobile = useIsSmall()\n return href\n ? (\n <ButtonEx\n fullWidth={true}\n marginTop={1}\n marginBottom={1}\n marginRight={isMobile ? 2 : 1}\n marginLeft={isMobile ? 2 : 0}\n target={href ?? '_blank'}\n href={href}\n color=\"primary\"\n variant=\"contained\"\n paddingX={3}\n sx={{ display: href || to ? 'flex' : 'none' }}\n >\n {buttonText}\n </ButtonEx>\n )\n : to\n ? (\n <ButtonEx\n fullWidth={true}\n marginTop={1}\n marginBottom={1}\n marginRight={isMobile ? 2 : 1}\n marginLeft={isMobile ? 2 : 0}\n to={to}\n color=\"primary\"\n variant=\"contained\"\n paddingX={3}\n sx={{ display: href || to ? 'flex' : 'none' }}\n >\n {buttonText}\n </ButtonEx>\n )\n : (\n <ButtonEx\n fullWidth={true}\n marginTop={1}\n marginBottom={1}\n marginRight={isMobile ? 2 : 1}\n marginLeft={isMobile ? 2 : 0}\n color=\"primary\"\n variant=\"contained\"\n paddingX={3}\n sx={{ display: href || to ? 'flex' : 'none' }}\n >\n {buttonText}\n </ButtonEx>\n )\n}\n\nexport const BasicHero: React.FC<BasicHeroProps> = ({\n backgroundImage,\n title,\n gradientTitle,\n backgroundColor,\n textColor,\n desc,\n heroImage,\n title2,\n subLinkText1,\n subLinkText2,\n subLinkPath,\n button1Text,\n button2Text,\n button2To,\n button1To,\n button2Href,\n button1Href,\n subLinkIcon,\n sx,\n ...props\n// eslint-disable-next-line complexity\n}) => {\n const isMobile = useIsSmall()\n const styles = useGradientStyles()\n\n const StyledSpan = styled('span')({ ...styles.heading })\n\n return (\n <FlexGrowCol\n sx={{\n backgroundImage: `url(${backgroundImage})`,\n backgroundPosition: {\n lg: 'bottom', md: 'center left', xs: 'top left',\n },\n minHeight: {\n md: '500px',\n sm: '400px',\n xs: '200px',\n },\n ...sx,\n }}\n style={{\n backgroundColor: backgroundColor ?? '',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n color: textColor ?? '',\n }}\n {...props}\n >\n <Container>\n <Grid\n container\n justifyContent=\"center\"\n alignItems=\"center\"\n sx={{\n alignItems: { xs: 'center' },\n justifyContent: { xs: 'center' },\n }}\n >\n <Grid size={{\n xs: 12, sm: 8, md: backgroundImage ? 6 : 8, lg: backgroundImage ? 6 : 8,\n }}\n >\n <FlexGrowCol paddingY={2} sx={{ alignItems: { xs: backgroundImage && !isMobile ? 'flex-start' : 'center' } }}>\n <Typography variant=\"h1\" component=\"h1\" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>\n {title\n ? {`${title} `}\n : null}\n {gradientTitle\n ? (\n <StyledSpan>\n {' '}\n {` ${gradientTitle}`}\n </StyledSpan>\n )\n : null}\n {title2\n ? {` ${title2}`}\n : null}\n </Typography>\n <Typography variant=\"body1\" component=\"h2\" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>\n {desc}\n </Typography>\n <FlexGrowRow\n sx={{ flexDirection: { lg: 'row', xs: 'column' } }}\n width=\"100%\"\n marginTop={1}\n >\n {\n button1Href\n ? <ButtonSection href={button1Href} buttonText={button1Text} />\n : button1To ? <ButtonSection to={button1To} buttonText={button1Text} /> : <ButtonSection buttonText={button1Text} />\n }\n {\n button2Href\n ? <ButtonSection href={button2Href} buttonText={button2Text} />\n : button2To ? <ButtonSection to={button2To} buttonText={button2Text} /> : <ButtonSection buttonText={button2Text} />\n }\n </FlexGrowRow>\n <SubLinkSection\n subLinkIcon={subLinkIcon}\n subLinkText1={subLinkText1}\n subLinkText2={subLinkText2}\n subLinkPath={subLinkPath}\n backgroundImageAlignment={backgroundImage ? true : false}\n />\n </FlexGrowCol>\n </Grid>\n <Grid size={{ xs: 12, md: 6 }}>\n {heroImage\n ? <img src={heroImage} width=\"100%\" />\n : null}\n </Grid>\n </Grid>\n </Container>\n </FlexGrowCol>\n )\n}\n","import { useIsDark } from '@xylabs/react-theme'\nimport type { CSSProperties } from 'react'\n\nexport interface GradientStyles {\n background: CSSProperties\n border: CSSProperties\n heading: CSSProperties\n}\n\nexport const colorfulGradientLightMode = () => {\n return {\n background: { backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)' },\n border: {\n borderImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n borderImageSlice: 1,\n borderImageSource: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n borderRadius: 0,\n borderStyle: 'solid',\n borderWidth: '2px',\n },\n heading: {\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n background: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n display: 'inline-block',\n },\n }\n}\n\nexport const colorfulGradientDarkMode = () => {\n return {\n background: { backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)' },\n border: {\n borderImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n borderImageSlice: 1,\n borderImageSource: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n borderRadius: 0,\n borderStyle: 'solid',\n borderWidth: '2px',\n },\n heading: {\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n background: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n display: 'inline-block',\n },\n }\n}\n\nexport const useGradientStyles = () => {\n const dark = useIsDark()\n const styles = dark ? colorfulGradientDarkMode() : colorfulGradientLightMode()\n return styles\n}\n","import { assertEx } from '@xylabs/assert'\nimport { usePromise } from '@xylabs/react-promise'\nimport type { BoundWitness } from '@xyo-network/boundwitness-model'\nimport { BoundWitnessValidator } from '@xyo-network/boundwitness-validator'\nimport { isAnyPayload } from '@xyo-network/payload-model'\n\nimport type { ValidatedResponse } from './types/index.ts'\n\nexport const useValidateBoundWitness = (input?: string): ValidatedResponse<BoundWitness> => {\n const [output, validationError] = usePromise(async () => {\n if (!input) return\n\n const object = JSON.parse(input)\n const validPayload = assertEx(isAnyPayload(object) ? object : null, () => 'Invalid payload')\n\n const errors = await new BoundWitnessValidator(validPayload as BoundWitness).validate()\n return {\n payload: validPayload as BoundWitness,\n errors,\n }\n }, [input])\n\n const { payload, errors } = output ?? {}\n\n return {\n payload,\n errors: [validationError, ...errors ?? []].filter<Error>(error => !!error),\n }\n}\n","import type { Hash } from '@xylabs/hex'\nimport { usePromise } from '@xylabs/react-promise'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport { type Payload } from '@xyo-network/payload-model'\n\nexport const usePayloadHash = <TPayload extends Payload>(payload: TPayload | undefined | null) => {\n return usePayloadRootHash<TPayload>(payload)\n}\n\nexport const usePayloadDataHash = <TPayload extends Payload>(payload: TPayload | undefined | null) => {\n return usePromise(async () => (payload ? await PayloadBuilder.dataHash(payload) : undefined), [payload])[0]\n}\n\nexport const usePayloadRootHash = <TPayload extends Payload>(payload: TPayload | undefined | null) => {\n return usePromise(async () => (payload ? await PayloadBuilder.hash(payload) : undefined), [payload])[0]\n}\n\nexport const usePayloadHashes = <TPayload extends Payload>(payloads: TPayload[] | undefined | null) => {\n return usePromise(\n async () =>\n payloads\n ? await Promise.all(payloads.map<Promise<[TPayload, Hash]>>(async payload => [payload, await PayloadBuilder.dataHash(payload)]))\n : undefined,\n [payloads],\n )[0]\n}\n","import { assertEx } from '@xylabs/assert'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport type { AnyPayload, Payload } from '@xyo-network/payload-model'\nimport { isAnyPayload } from '@xyo-network/payload-model'\nimport { useMemo } from 'react'\n\nimport type { ValidatedResponse } from './types/index.ts'\n\nexport const usePayloadValidate = <TPayload extends AnyPayload>(input?: string): ValidatedResponse => {\n return useMemo(() => {\n if (!input) return {}\n try {\n const object = JSON.parse(input)\n const validPayload = assertEx(isAnyPayload(object) ? object : null, () => 'Invalid payload')\n const { schema, ...fields } = validPayload\n const payload = new PayloadBuilder({ schema }).fields(fields).build() as TPayload\n return { payload }\n } catch (error) {\n return { errors: [error as Error] }\n }\n }, [input])\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useState } from 'react'\n\nexport const useDataState = <T>(defaultValue: T | undefined): [T | undefined, Dispatch<SetStateAction<T | undefined>>] => {\n const [state, setState] = useState(defaultValue)\n\n const setDataState: Dispatch<SetStateAction<T | undefined>> = (value: SetStateAction<T | undefined>) => {\n try {\n if (JSON.stringify(value) !== JSON.stringify(state)) {\n setState(value)\n }\n } catch {\n console.error('setDataState failed! Make sure data type is stringifiable!')\n }\n }\n\n return [state, setDataState]\n}\n","/* This file only exists to deal with the false positive lint error */\n\nexport { useMediaQuery } from '@mui/material'\n","import type { ForwardedRef } from 'react'\nimport { useEffect, useRef } from 'react'\n\nexport const useShareForwardedRef = <T>(forwardedRef: ForwardedRef<T> | null | undefined, refresh = 0) => {\n // final ref that will share value with forward ref. this is the one to be attached to components\n const innerRef = useRef<T>(null)\n\n useEffect(() => {\n if (!forwardedRef) {\n return\n }\n if (typeof forwardedRef === 'function') {\n forwardedRef(innerRef.current)\n } else {\n forwardedRef.current = innerRef.current\n }\n }, [forwardedRef, refresh])\n\n return innerRef\n}\n","import {\n FormHelperText, Popover, type PopoverProps, TextField,\n} from '@mui/material'\nimport React from 'react'\n\nexport interface FixedPointPopoverProps extends PopoverProps {\n fixedPoint?: number\n minFixedPoint?: number\n onFixedPointChange?: (value: number) => void\n}\n\nexport const FixedPointPopover: React.FC<FixedPointPopoverProps> = ({\n fixedPoint, minFixedPoint: minimumPoint, onFixedPointChange, ...props\n}) => {\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const fixedPointInteger = Number.parseInt(event.target.value, 10)\n if (Number.isNaN(fixedPointInteger)) return\n onFixedPointChange?.(fixedPointInteger)\n }\n\n return (\n <Popover slotProps={{ paper: { sx: { p: 2 } } }} {...props}>\n <TextField slotProps={{ htmlInput: { min: minimumPoint } }} value={fixedPoint} onChange={handleChange} type=\"number\" />\n <FormHelperText>Set the Fixed Point</FormHelperText>\n </Popover>\n )\n}\n","/**\n * Format a raw input string (i.e. Change event from input type=text)\n * Designed to filter out non-digits and extra decimals\n **/\nexport const formatBigIntInput = (rawValue: string) => {\n // remove all alpha characters but allow decimals\n const filteredValue = rawValue.replaceAll(/[^\\d.]/g, '')\n // only allow one decimal point\n if (filteredValue.split('.').length > 2) return\n return filteredValue\n}\n","import type {\n FormControlProps, StandardTextFieldProps, TextFieldProps,\n} from '@mui/material'\nimport {\n FormControl, FormHelperText, TextField,\n} from '@mui/material'\nimport { toFixedPoint } from '@xylabs/decimal-precision'\nimport { isDefined } from '@xylabs/typeof'\nimport type { FocusEventHandler } from 'react'\nimport React, {\n useEffect, useMemo, useState,\n} from 'react'\n\nimport { formatBigIntInput } from './helpers/index.ts'\nimport { FixedPointInputAdornment } from './InputAdornment.tsx'\n\nexport type BigIntTextFieldProps = TextFieldProps & {\n defaultFixedPoint?: number\n defaultRawValue?: string\n hideAdornment?: boolean\n onChangeFixedPoint?: (value?: bigint) => void\n onChangeFormatted?: (value?: string) => void\n resetValue?: number\n}\n\nexport const BigIntTextField: React.FC<BigIntTextFieldProps> = ({\n defaultFixedPoint = 18, defaultRawValue, helperText, hideAdornment, onChangeFixedPoint, onChangeFormatted, onChange, resetValue, ...props\n}) => {\n const [rawValue, setRawValue] = useState<string>('')\n const [fixedPoint, setFixedPoint] = useState(defaultFixedPoint)\n const [error, setError] = useState<Error>()\n\n useMemo(() => {\n setRawValue('')\n }, [resetValue])\n\n useMemo(() => {\n if (isDefined(defaultRawValue)) {\n const formattedValue = formatBigIntInput(defaultRawValue)\n if (formattedValue) setRawValue(formattedValue)\n }\n }, [defaultRawValue])\n\n const handleChange: FocusEventHandler<HTMLTextAreaElement> = (event) => {\n // run standard callback with raw event\n onChange?.(event)\n\n const formattedValue = formatBigIntInput(event.target.value)\n if (isDefined(formattedValue)) {\n // if value was formatted, update the state and run the formatted change callback\n setRawValue(formattedValue)\n onChangeFormatted?.(formattedValue)\n }\n }\n\n const onFixedPointChange = (fixedPoint: number) => setFixedPoint(fixedPoint)\n\n // on value or point changes, run the bigInt callback\n const bigIntValue = useMemo(() => {\n if (rawValue) {\n const fixedValue = toFixedPoint(rawValue, fixedPoint)\n setError(undefined)\n try {\n return fixedValue\n } catch (e) {\n console.error(e)\n setError(e as Error)\n return\n }\n } else {\n return\n }\n // run bigInt callback\n }, [rawValue, fixedPoint])\n\n useEffect(() => {\n onChangeFixedPoint?.(bigIntValue)\n }, [bigIntValue])\n\n // prevent the fixed point from being less than the number of decimal places\n const minFixedPoint = rawValue.split('.')[1]?.length\n\n const resolvedHelperText = useMemo(() => {\n if (error) return 'Cannot convert to BigInt'\n return helperText ?? 'Enter a number'\n }, [helperText, error])\n\n return (\n <>\n <TextField\n onChange={handleChange}\n type=\"string\"\n error={Boolean(error)}\n slotProps={{\n htmlInput: { pattern: '[0-9]*[.]?[0-9]*' },\n input: {\n startAdornment: (hideAdornment\n ? null\n : (\n <FixedPointInputAdornment\n position=\"start\"\n fixedPoint={fixedPoint}\n minFixedPoint={minFixedPoint}\n onFixedPointChange={onFixedPointChange}\n />\n )\n ),\n },\n }}\n value={rawValue}\n {...props}\n />\n <FormHelperText>{resolvedHelperText}</FormHelperText>\n </>\n )\n}\n\nexport interface InputWithFormControlProps extends FormControlProps {\n textFieldProps?: BigIntTextFieldProps\n}\n\nexport const WithFormControl: React.FC<InputWithFormControlProps> = ({ textFieldProps, ...props }) => (\n <FormControl {...props}>\n <BigIntTextField {...textFieldProps} />\n </FormControl>\n)\n","import type { InputAdornmentProps } from '@mui/material'\nimport {\n Avatar, IconButton, InputAdornment,\n} from '@mui/material'\nimport React, { useRef, useState } from 'react'\n\nimport { FixedPointPopover } from './FixedPointPopover.tsx'\n\nexport interface FixedPointInputAdornmentProps extends InputAdornmentProps {\n fixedPoint?: number\n minFixedPoint?: number\n onFixedPointChange?: (value: number) => void\n}\n\nexport const FixedPointInputAdornment: React.FC<FixedPointInputAdornmentProps> = ({\n fixedPoint, minFixedPoint, onFixedPointChange, ...props\n}) => {\n const ref = useRef<HTMLButtonElement>(null)\n const [open, setOpen] = useState(false)\n\n return (\n <InputAdornment {...props}>\n <FixedPointPopover\n anchorEl={ref.current}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n fixedPoint={fixedPoint}\n minFixedPoint={minFixedPoint}\n onClose={() => setOpen(false)}\n onFixedPointChange={onFixedPointChange}\n open={open}\n />\n <IconButton size=\"small\" ref={ref} onClick={() => setOpen(!open)}>\n <Avatar sx={{\n fontSize: '.75rem',\n height: '20px',\n width: '20px',\n }}\n >\n {fixedPoint}\n </Avatar>\n </IconButton>\n </InputAdornment>\n )\n}\n","import { BigIntTextField, WithFormControl } from './TextField.tsx'\n\nexport const BigIntInput = {\n TextField: BigIntTextField,\n WithFormControl,\n}\n","import type {\n BoxProps, TypographyProps, TypographyTypeMap,\n} from '@mui/material'\nimport {\n Box, styled, Typography,\n} from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport { useShareForwardedRef } from '../hooks/index.ts'\n\n/**\n * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259\n */\n\nconst ComponentName = 'Ellipsize'\n\nexport interface EllipsizeRootProps extends BoxProps {\n beforeLineHeight?: string | number\n}\n\nconst EllipsizeRoot = styled(Box, {\n name: ComponentName,\n shouldForwardProp: prop => prop !== 'beforeLineHeight',\n slot: 'Root',\n})<EllipsizeRootProps>(({ beforeLineHeight = 0 }) => ({\n '&': {\n // because the cell content ends up absolutely positioned, the cell doesn't know the content height.\n // the pseudo element with a hidden character establishes the proper height of the content and hides it\n ':before': {\n content: \"'nbsp;'\",\n display: 'block',\n // take the pseudo element out of the `display: block` flow so it won't push against our actual content\n float: 'left',\n lineHeight: beforeLineHeight,\n visibility: 'hidden',\n },\n },\n}))\n\nconst EllipsizeInnerWrap = styled(Box, {\n name: ComponentName,\n slot: 'innerWrap',\n})(() => ({ position: 'relative' }))\n\nconst EllipsizeContentWrap = styled(Typography, {\n name: ComponentName,\n shouldForwardProp: prop => prop !== 'ellipsisPosition',\n slot: 'contentWrap',\n})<TypographyWithComponentProps>(({\n theme, ellipsisPosition, fontFamily,\n}) => {\n return theme.unstable_sx({\n fontFamily: fontFamily ?? 'monospace',\n left: 0,\n overflow: 'hidden',\n position: 'absolute',\n right: 0,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...(ellipsisPosition === 'start'\n ? {\n direction: 'rtl',\n textAlign: 'left',\n }\n : {}),\n })\n})\n\nexport type TypographyWithComponentProps<D extends React.ElementType = TypographyTypeMap['defaultComponent'], P = {}> = TypographyProps<D, P> & {\n ellipsisPosition?: 'start' | 'end'\n}\n\nexport interface EllipsizeBoxProps extends BoxProps {\n beforeLineHeight?: number | string\n disableSharedRef?: boolean\n ellipsisPosition?: 'start' | 'end'\n innerWrapProps?: BoxProps\n typographyProps?: TypographyWithComponentProps\n}\n\nexport const EllipsizeBox = ({\n ref, innerWrapProps, children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props\n}: PropsWithChildren<EllipsizeBoxProps>) => {\n const sharedRef = useShareForwardedRef(ref)\n const { sx: innerWrapSx, ...remainingInnerWrapProps } = innerWrapProps ?? {}\n\n return (\n <EllipsizeRoot ref={sharedRef} {...props}>\n <EllipsizeInnerWrap\n {...remainingInnerWrapProps}\n sx={{\n alignItems: 'center', display: 'flex', ...innerWrapSx,\n }}\n >\n <EllipsizeContentWrap component=\"span\" ellipsisPosition={ellipsisPosition} variant=\"body2\" {...typographyProps}>\n {children}\n </EllipsizeContentWrap>\n </EllipsizeInnerWrap>\n </EllipsizeRoot>\n )\n}\nEllipsizeBox.displayName = 'EllipsizeBox'\n","import type { StackProps } from '@mui/material'\nimport { Stack, Typography } from '@mui/material'\nimport React from 'react'\n\nexport interface LabeledTextFieldWrapperProps extends StackProps {\n label: string\n}\n\nexport const LabeledTextFieldWrapper: React.FC<LabeledTextFieldWrapperProps> = ({\n children, label, ...props\n}) => {\n return (\n <Stack flexDirection=\"column\" {...props}>\n <Typography gutterBottom variant=\"caption\">\n {label}\n </Typography>\n {children}\n </Stack>\n )\n}\n","import type { ListItemButtonProps } from '@mui/material'\nimport { ListItemButton } from '@mui/material'\nimport type { MouseEvent } from 'react'\nimport React from 'react'\nimport type { NavigateOptions, To } from 'react-router-dom'\nimport { useNavigate } from 'react-router-dom'\n\nexport interface ListItemButtonExProps extends ListItemButtonProps {\n target?: string\n to?: To\n toOptions?: NavigateOptions\n}\n\nexport const ListItemButtonExTo: React.FC<ListItemButtonExProps> = ({\n to, toOptions, onClick, ...props\n}) => {\n const navigate = useNavigate()\n const localOnClick = (event: MouseEvent<HTMLDivElement>) => {\n onClick?.(event)\n if (to) {\n void navigate(to, toOptions)\n }\n }\n\n return <ListItemButton onClick={localOnClick} {...props} />\n}\n\nexport const ListItemButtonEx: React.FC<ListItemButtonExProps> = ({ to, ...props }) => {\n return to ? <ListItemButtonExTo to={to} {...props} /> : <ListItemButton {...props} />\n}\n","import { FlexGrowRow } from '@xylabs/react-flexbox'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport { NotFound } from './NotFound.tsx'\n\nexport interface LoadResultProps<T> {\n /** @deprecated - use error prop */\n apiError?: Error\n /** Defer error handling to the children and load them */\n error?: boolean\n notFound: boolean\n searchResult: T | undefined\n}\n\nexport function LoadResult<T>(props: PropsWithChildren<LoadResultProps<T>>) {\n const {\n notFound, error, searchResult, children,\n } = props\n if (notFound) {\n return <NotFound />\n }\n if (error) {\n return <>{children}</>\n }\n return searchResult === undefined ? <FlexGrowRow busy minHeight=\"50px\" /> : <>{children}</>\n}\n","import { Typography } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport React from 'react'\n\n/** @deprecated use from @@xylabs/react-shared instead */\nexport const NotFound: React.FC<FlexBoxProps> = (props) => {\n return (\n <FlexGrowCol {...props}>\n <Typography variant=\"h2\">Sorry!</Typography>\n <Typography marginY={3} variant=\"body2\">\n {'Can\\'t find anything here'}\n </Typography>\n </FlexGrowCol>\n )\n}\n","import type { TypographyProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport React from 'react'\n\nexport const Pipe: React.FC<TypographyProps> = (props) => {\n return (\n <Typography marginX={1} component=\"span\" {...props}>\n |\n </Typography>\n )\n}\n","import type { AlertProps } from '@mui/material'\nimport { Alert, AlertTitle } from '@mui/material'\nimport React from 'react'\n\nexport interface PayloadDataMissingProps extends AlertProps {\n alertBody?: string\n}\n\nexport const PayloadDataMissing: React.FC<PayloadDataMissingProps> = ({ alertBody, ...props }) => {\n return (\n <Alert severity=\"warning\" {...props}>\n <AlertTitle>Missing Data</AlertTitle>\n {alertBody ?? 'Payload is missing required data to render correctly'}\n </Alert>\n )\n}\n","import { styled } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nconst StyledScrollTableOnSm = styled('div')(({ theme }) => ({\n [theme.breakpoints.down('md')]: { overflowX: 'scroll' },\n display: 'flex',\n flexGrow: 1,\n}))\n\nconst ScrollTableOnSm: React.FC<PropsWithChildren> = ({ children }) => <StyledScrollTableOnSm>{children}</StyledScrollTableOnSm>\n\nexport { ScrollTableOnSm }\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowRow } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nexport const SectionSpacingRow = ({\n ref, children, sx, ...props\n}: FlexBoxProps) => {\n const theme = useTheme()\n return (\n <FlexGrowRow\n sx={{\n paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },\n paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },\n ...sx,\n }}\n width=\"100%\"\n ref={ref}\n {...props}\n >\n {children}\n </FlexGrowRow>\n )\n}\n\nSectionSpacingRow.displayName = 'SectionSpacingRow'\n","import type { TableCellProps } from '@mui/material'\nimport { styled, TableCell } from '@mui/material'\nimport { asLinkHrefOrToProps, LinkEx } from '@xylabs/react-link'\nimport React, { useMemo } from 'react'\nimport type { To } from 'react-router-dom'\n\nimport { EllipsizeBox } from '../Ellipsize.tsx'\n\nconst EllipsisTableCellRoot = styled(TableCell, {\n name: 'EllipsisTableCell',\n shouldForwardProp: prop => prop !== 'width',\n slot: 'Root',\n})(({ width = '100%' }) => ({ width }))\n\nexport interface EllipsisTableCellProps extends TableCellProps {\n href?: string\n link?: boolean\n to?: To\n value?: string\n /**\n * Width of the table cell.\n *\n * Note: When using percentages, this value can be different than what you expect\n * if used on a cell that is not the first cell in the first row.\n */\n width?: string | number\n}\n\nexport const EllipsisTableCellWithRef = ({\n ref, children, href, link = false, to, value, ...props\n}: EllipsisTableCellProps) => {\n const data = useMemo(() => {\n if (children) {\n return children\n }\n if (href || link || to) {\n return (\n <LinkEx title={value} {...asLinkHrefOrToProps({ to, href })} target={href ? '_blank' : undefined}>\n {value}\n </LinkEx>\n )\n }\n return value\n }, [children, href, link, to, value])\n return (\n <EllipsisTableCellRoot {...props}>\n <EllipsizeBox\n ref={ref}\n sx={{ cursor: link || to || href ? 'pointer' : 'inherit' }}\n >\n {data}\n </EllipsizeBox>\n </EllipsisTableCellRoot>\n )\n}\n\nEllipsisTableCellWithRef.displayName = 'EllipsisTableCell'\nexport const EllipsisTableCell = EllipsisTableCellWithRef\n","import React from 'react'\n\nimport type { EllipsisTableCellProps } from './EllipsisTableCell.tsx'\nimport { EllipsisTableCell } from './EllipsisTableCell.tsx'\n\nexport interface AddressTableCellProps extends EllipsisTableCellProps {\n /** @deprecated - archives are no longer supported */\n archive?: string\n /** @deprecated - use events instead */\n exploreDomain?: string\n link?: boolean\n}\n\nconst AddressTableCell = ({\n ref, value, archive, exploreDomain, link, ...props\n}: AddressTableCellProps) => {\n const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : undefined\n const to = exploreDomain === undefined && archive ? `/archive/${archive}/address/${value}` : undefined\n\n return <EllipsisTableCell value={value} href={href} to={to} ref={ref} link={link} {...props} />\n}\n\nAddressTableCell.displayName = 'AddressTableCell'\nexport { AddressTableCell }\n","import type { Hash } from '@xylabs/hex'\nimport React from 'react'\n\nimport type { EllipsisTableCellProps } from './EllipsisTableCell.tsx'\nimport { EllipsisTableCell } from './EllipsisTableCell.tsx'\n\nexport interface HashTableCellProps extends EllipsisTableCellProps {\n /** @deprecated - archives are no longer used */\n archive?: string\n dataType?: 'block' | 'payload'\n /** @deprecated - use event listeners instead of link building via props */\n exploreDomain?: string\n /** @deprecated - use event listeners instead of link building via props */\n network?: string\n /** @deprecated - onClick instead */\n onHashClick?: (value: Hash) => void\n}\n\nexport const HashTableCell: React.FC<HashTableCellProps> = ({\n ref, value, dataType, ...props\n}) => {\n return (\n <EllipsisTableCell\n value={value}\n {...props}\n />\n )\n}\n","import type { AvatarProps } from '@mui/material'\nimport { Avatar, useTheme } from '@mui/material'\nimport React from 'react'\n\nexport const ThemeTokenAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n const theme = useTheme()\n return <Avatar sx={{ background: theme.vars.palette.common.white }} {...props} />\n}\n","import type { AvatarGroupProps } from '@mui/material'\nimport { AvatarGroup } from '@mui/material'\nimport React from 'react'\n\nimport { ThemeTokenAvatar } from '../ThemeTokenAvatar/index.ts'\n\nexport interface ThemeTokenAvatarGroupProps extends AvatarGroupProps {\n images?: string[]\n}\n\nexport const ThemeTokenAvatarGroup: React.FC<ThemeTokenAvatarGroupProps> = ({ images, ...props }) => {\n return <AvatarGroup {...props}>{images?.map((image, index) => <ThemeTokenAvatar key={index} src={image} />)}</AvatarGroup>\n}\n","import type { PaperProps, TypographyProps } from '@mui/material'\nimport { Paper, Typography } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\nexport interface TokenBarProps extends PaperProps {\n text1?: ReactNode\n text1Props?: TypographyProps\n text1Suffix?: ReactNode\n text2?: ReactNode\n text2Props?: TypographyProps\n text2Suffix?: ReactNode\n}\n\nexport const TokenBar: React.FC<TokenBarProps> = ({\n text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props\n}) => {\n return (\n <Paper elevation={0} className=\"TokenBar-root\" {...props}>\n <FlexRow justifyContent=\"space-between\">\n <Typography variant=\"body1\" fontWeight={300} margin={1} {...text1Props}>\n {text1}\n {text1Suffix}\n </Typography>\n <Typography variant=\"body1\" fontWeight={300} textTransform=\"uppercase\" color=\"gray\" margin={1} {...text2Props}>\n {text2}\n {text2Suffix}\n </Typography>\n </FlexRow>\n </Paper>\n )\n}\n","export { default as ada } from './ada.png'\nexport { default as btc } from './btc.png'\nexport { default as busd } from './busd.png'\nexport { default as dai } from './dai.png'\nexport { default as dogecoin } from './dogecoin.png'\nexport { default as dot } from './dot.png'\nexport { default as ethereum } from './ethereum.png'\nexport { default as frax } from './frax.png'\nexport { default as link } from './link.png'\nexport { default as sol } from './sol.png'\nexport { default as tether } from './tether.png'\nexport { default as usdCoin } from './usd-coin.png'\nexport { default as weth } from './weth.png'\nexport { default as wrappedBtc } from './wrapped-bitcoin.png'\nexport { default as xl1 } from './xl1.png'\nexport { default as xyo } from './xyo.png'\n","import * as tokenImages from './img/index.ts'\n\nexport interface TokenData {\n coinmarketcapLink: string\n etherscanLink: string\n icon: string\n readableName: string\n tokenSymbol: string\n uniqueTokenId: string\n}\n\nexport const TokenData: TokenData[] = [\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/multi-collateral-dai/',\n etherscanLink: 'https://etherscan.io/token/0x6b175474e89094c44da98b954eedeac495271d0f',\n icon: tokenImages.dai,\n readableName: 'Dai',\n tokenSymbol: 'dai',\n uniqueTokenId: 'dai',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/weth/',\n etherscanLink: 'https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',\n icon: tokenImages.weth,\n readableName: 'Weth',\n tokenSymbol: 'weth',\n uniqueTokenId: 'weth',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/ethereum/',\n etherscanLink: 'n/a',\n icon: tokenImages.ethereum,\n readableName: 'Ethereum',\n tokenSymbol: 'eth',\n uniqueTokenId: 'ethereum',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/bitcoin/',\n etherscanLink: 'n/a',\n icon: tokenImages.btc,\n readableName: 'Bitcoin',\n tokenSymbol: 'btc',\n uniqueTokenId: 'btc',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/xl1/',\n etherscanLink: 'https://etherscan.io/token/0xf72ae3e0da743033abd7a407557d684c1ae66aed',\n icon: tokenImages.xl1,\n readableName: 'XL1',\n tokenSymbol: 'xl1',\n uniqueTokenId: 'xl1',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/xyo/',\n etherscanLink: 'https://etherscan.io/token/0x55296f69f40ea6d20e478533c15a6b08b654e758',\n icon: tokenImages.xyo,\n readableName: 'XYO',\n tokenSymbol: 'xyo',\n uniqueTokenId: 'xyo',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/frax/',\n etherscanLink: 'https://etherscan.io/token/0x853d955acef822db058eb8505911ed77f175b99e',\n icon: tokenImages.frax,\n readableName: 'Frax',\n tokenSymbol: 'frax',\n uniqueTokenId: 'frax',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/wrapped-bitcoin/',\n etherscanLink: 'https://etherscan.io/token/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599',\n icon: tokenImages.wrappedBtc,\n readableName: 'Wrapped BTC',\n tokenSymbol: 'wbtc',\n uniqueTokenId: 'wbtc',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/usd-coin/',\n etherscanLink: 'https://etherscan.io/token/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',\n icon: tokenImages.usdCoin,\n readableName: 'USDC',\n tokenSymbol: 'usdc',\n uniqueTokenId: 'usdc',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/tether/',\n etherscanLink: 'https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7',\n icon: tokenImages.tether,\n readableName: 'Tether',\n tokenSymbol: 'usdt',\n uniqueTokenId: 'usdt',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/cardano/',\n etherscanLink: 'https://etherscan.io/token/0xc14777c94229582e5758c5a79b83dde876b9be98',\n icon: tokenImages.ada,\n readableName: 'Cardano',\n tokenSymbol: 'ada',\n uniqueTokenId: 'ada',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/binance-usd/',\n etherscanLink: 'https://etherscan.io/token/0x4Fabb145d64652a948d72533023f6E7A623C7C53',\n icon: tokenImages.busd,\n readableName: 'Binance USD',\n tokenSymbol: 'busd',\n uniqueTokenId: 'busd',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/dogecoin/',\n etherscanLink: 'https://etherscan.io/token/0x7618b5024a6349f9aef10ddfd33e3428c734551e',\n icon: tokenImages.dogecoin,\n readableName: 'Dogecoin',\n tokenSymbol: 'doge',\n uniqueTokenId: 'doge',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/polkadot-new/',\n etherscanLink: 'https://etherscan.io/token/0x2d4fb6dd969992c881d8e534c747cc925d5ba221',\n icon: tokenImages.dot,\n readableName: 'Polkadot',\n tokenSymbol: 'dot',\n uniqueTokenId: 'dot',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/chainlink/',\n etherscanLink: 'https://etherscan.io/token/0x514910771af9ca656af840dff83e8264ecf986ca',\n icon: tokenImages.link,\n readableName: 'ChainLink',\n tokenSymbol: 'link',\n uniqueTokenId: 'link',\n },\n {\n coinmarketcapLink: 'https://coinmarketcap.com/currencies/solana/',\n etherscanLink: 'https://etherscan.io/token/0x1f54638b7737193ffd86c19ec51907a7c41755d8',\n icon: tokenImages.sol,\n readableName: 'Solana',\n tokenSymbol: 'sol',\n uniqueTokenId: 'sol',\n },\n]\n","import { TokenData } from './TokenData.ts'\n\nexport const getTokenData = (symbols: (string | undefined)[]) => {\n return symbols?.map((symbol) => {\n const additionalTokenData = TokenData.find(x => x.tokenSymbol.toLowerCase() === symbol?.toLowerCase())\n const checkedTokenData = additionalTokenData ?? {\n coinmarketcapLink: '',\n etherscanLink: '',\n icon: '',\n readableName: 'Unknown Token',\n tokenSymbol: 'unknown',\n uniqueTokenId: 'unknown',\n }\n return checkedTokenData\n })\n}\n","import type { AvatarProps, CardHeaderProps } from '@mui/material'\nimport { CardHeader, Typography } from '@mui/material'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { ThemeTokenAvatar } from '../ThemeTokenAvatar/index.ts'\n\nexport interface TokenSummaryProps extends CardHeaderProps {\n icon?: string\n imgBgProps?: AvatarProps\n symbol?: string\n symbolElement?: ReactNode\n}\n\nexport const TokenSummary: React.FC<TokenSummaryProps> = ({\n icon, symbol, symbolElement, children, ...props\n}) => {\n return (\n <>\n <CardHeader\n avatar={<ThemeTokenAvatar src={icon} alt={symbol} />}\n title={(\n <Typography variant=\"h6\" fontWeight={300} textTransform=\"uppercase\">\n {symbolElement ?? symbol}\n </Typography>\n )}\n {...props}\n />\n {children}\n </>\n )\n}\n","import type { TypographyProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport React from 'react'\n\nimport { useGradientStyles } from '../hooks/index.ts'\n\nexport interface TypographyExProps extends TypographyProps {\n gradient?: 'text'\n}\n\nexport const TypographyEx: React.FC<TypographyExProps> = ({ gradient, ...props }) => {\n const styles = useGradientStyles()\n return <Typography style={gradient === 'text' ? styles.heading : undefined} {...props} />\n}\n","import type { EmptyObject } from '@xylabs/react-shared'\nimport { createContextEx } from '@xylabs/react-shared'\n\nexport const ResolvedDivinerContext = <T extends EmptyObject>() => createContextEx<T>()\n","import { useResetState } from '@xylabs/react-hooks'\nimport type { ContextExProviderProps } from '@xylabs/react-shared'\nimport type { Context, PropsWithChildren } from 'react'\nimport React, { useMemo } from 'react'\n\nimport type { ResolvedDivinerState } from './State.ts'\n\nexport interface DivinerProviderProps<D> extends ContextExProviderProps, PropsWithChildren {\n context: Context<ResolvedDivinerState<D>>\n diviner?: D\n}\n\n/** Exposes a resolved diviner */\nexport const ResolvedDivinerProvider = <D,>({\n diviner: divinerProp, required = false, children, context: Context,\n}: DivinerProviderProps<D>) => {\n const [diviner, setDiviner] = useResetState<D | undefined>(divinerProp)\n\n const value: ResolvedDivinerState<D> = useMemo(() => {\n const resolveDiviner = () => {\n if (divinerProp) {\n return diviner === divinerProp ? diviner : undefined\n } else {\n return diviner\n }\n }\n return {\n diviner: resolveDiviner(),\n provided: true,\n setDiviner,\n }\n }, [\n setDiviner, divinerProp])\n\n return (\n <Context\n value={value}\n >\n {diviner\n ? children\n : required\n ? null\n : children}\n </Context>\n )\n}\n","import { createContextEx } from '@xylabs/react-shared'\n\nimport type { ListModeContextState } from './State.ts'\n\nexport const ListModeContext = createContextEx<ListModeContextState>()\n","import type { PropsWithChildren } from 'react'\nimport React, { useMemo, useState } from 'react'\n\nimport type { ListMode } from '../../models/index.ts'\nimport { ListModeContext } from './Context.ts'\nimport type { ListModeContextState } from './State.ts'\n\nexport interface ListModeProviderProps {\n defaultListMode?: ListMode\n}\n\nexport const ListModeProvider: React.FC<PropsWithChildren<ListModeProviderProps>> = ({ children, defaultListMode }) => {\n const [listMode, setListMode] = useState(defaultListMode ?? 'default')\n\n const value: ListModeContextState = useMemo(() => ({\n listMode,\n provided: true,\n setListMode,\n }), [listMode,\n setListMode])\n\n return (\n <ListModeContext\n value={value}\n >\n {children}\n </ListModeContext>\n )\n}\n","import { useContextEx } from '@xylabs/react-shared'\n\nimport { ListModeContext } from './Context.ts'\n\nexport const useListMode = (required = false) => {\n return useContextEx(ListModeContext, 'ListMode', required)\n}\n","/**\n * @deprecated use from @xylabs/with instead\n * */\nexport const assertDefinedEx = <T>(expr?: T | null, message?: string): T => {\n if (expr !== null && expr !== undefined) return expr\n throw new Error(message)\n}\n","export const parseMeausureString = (measure?: string, absolute?: number) => {\n if (measure !== undefined && measure !== null && measure.length > 0) {\n if (measure.endsWith('px')) {\n return Number.parseFloat(measure.slice(0, Math.max(0, measure.length - 2)))\n } else if (measure.endsWith('%')) {\n if (absolute !== undefined) {\n return (Number.parseFloat(measure.slice(0, Math.max(0, measure.length - 1))) / 100) * absolute\n }\n throw new Error('Error Parsing Measure [missing absolute]')\n } else if (measure.endsWith('vw')) {\n return (Number.parseFloat(measure.slice(0, Math.max(0, measure.length - 2))) / 100) * window.innerWidth\n } else if (measure.endsWith('vh')) {\n return (Number.parseFloat(measure.slice(0, Math.max(0, measure.length - 2))) / 100) * window.innerHeight\n }\n throw new Error(`Error Parsing Measure [${measure}]`)\n }\n}\n\nexport const parsePadding = (padding: string) => {\n const parts = padding.split(' ')\n switch (parts.length) {\n case 4: {\n return {\n bottom: parts[2],\n left: parts[3],\n right: parts[1],\n top: parts[0],\n }\n }\n case 3: {\n return {\n bottom: parts[2],\n right: parts[1],\n top: parts[0],\n }\n }\n case 2: {\n return {\n bottom: parts[0],\n left: parts[1],\n right: parts[1],\n top: parts[0],\n }\n }\n case 1: {\n return {\n bottom: parts[0],\n left: parts[0],\n right: parts[0],\n top: parts[0],\n }\n }\n }\n}\n\nexport const getActualPaddingX = (element: HTMLElement) => {\n const padding = parsePadding(globalThis.getComputedStyle(element, null).getPropertyValue('padding'))\n const paddingLeft\n = parseMeausureString(globalThis.getComputedStyle(element, null).getPropertyValue('padding-left') ?? padding?.left, element.clientWidth) ?? 0\n const paddingRight\n = parseMeausureString(globalThis.getComputedStyle(element, null).getPropertyValue('padding-right') ?? padding?.right, element.clientWidth) ?? 0\n return paddingLeft + paddingRight\n}\n","import {\n BubbleChartRounded as BubbleChartRoundedIcon,\n HubRounded as HubRoundedIcon,\n InsertLinkRounded as InsertLinkRoundedIcon,\n Inventory2Rounded as Inventory2RoundedIcon,\n TimerRounded as TimerRoundedIcon,\n VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport type { SvgIconProps } from '@mui/material'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nexport type NetworkComponentSlug = 'sentinel' | 'bridge' | 'archivist' | 'diviner' | 'node' | 'witness'\n\nexport interface NetworkComponentDetails {\n icon: (props?: SvgIconProps) => ReactElement\n name: string\n slug: NetworkComponentSlug\n}\n\nexport const networkComponents: NetworkComponentDetails[] = [\n {\n icon: props => <HubRoundedIcon {...props} />, name: 'Node', slug: 'node',\n },\n {\n icon: props => <TimerRoundedIcon {...props} />, name: 'Sentinel', slu