@xyo-network/react-gas-price 2.81.10 → 2.83.0

package/dist/browser/index.d.ts

@@ -1,3 +1,85 @@
-export * from './components/index.js';
-export * from './types/index.js';
-//# sourceMappingURL=index.d.ts.map
+import * as _mui_material from '@mui/material';
+import { AvatarProps, CardProps } from '@mui/material';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import * as _xylabs_react_flexbox from '@xylabs/react-flexbox';
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { WithChildren } from '@xylabs/react-shared';
+import { TypographyExProps } from '@xyo-network/react-shared';
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
+import * as _mui_material_OverridableComponent_js from '@mui/material/OverridableComponent.js';
+
+declare const EthereumGasPriceAvatar: React__default.FC<AvatarProps>;
+
+interface GasPriceWitnessUIBasePayload {
+    baseFee?: UIField;
+    blockNumber?: UIField;
+    gasPrice?: GasPrice[];
+    schema?: string;
+    timestamp?: number;
+    website?: string;
+}
+interface GasPrice {
+    price?: UIField;
+    priorityFee?: UIField;
+}
+interface UIField {
+    label?: string;
+    value?: number;
+}
+
+interface GasPriceCardHeaderProps extends CardProps {
+    parsedPayload?: GasPriceWitnessUIBasePayload;
+    title?: string;
+}
+declare const GasPriceWitnessCardHeader: React__default.ForwardRefExoticComponent<Omit<GasPriceCardHeaderProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+interface GasFeeCardProps extends CardProps {
+    gasPrice?: number;
+    priorityFee?: number;
+    priorityFeeLabel?: string;
+    speed?: string;
+    speedPaperElevation?: number;
+}
+declare const GasFeeCard: React__default.FC<GasFeeCardProps>;
+
+interface GasPriceWitnessHeaderBoxProps extends FlexBoxProps {
+    heading?: string;
+    parsedPayload?: GasPriceWitnessUIBasePayload;
+}
+declare const GasPriceWitnessHeaderBox: React__default.FC<GasPriceWitnessHeaderBoxProps>;
+
+interface GasPriceEstimateActionsBoxProps extends FlexBoxProps {
+    baseFee?: number;
+    baseFeeLabel?: string;
+    blockNumber?: number;
+    blockNumberLabel?: string;
+    timestamp?: number;
+}
+declare const GasPriceHeaderActionsBox: React__default.FC<GasPriceEstimateActionsBoxProps>;
+
+interface GasPriceHeaderTypographyProps extends TypographyExProps, WithChildren {
+    heading?: string;
+}
+declare const GasPriceHeaderTypography: React__default.FC<GasPriceHeaderTypographyProps>;
+
+interface GasPriceHeadingTypographyProps extends TypographyExProps {
+    children?: ReactNode;
+    heading?: string;
+    networkIcon?: ReactNode;
+}
+declare const GasPriceHeadingTypography: React__default.FC<GasPriceHeadingTypographyProps>;
+
+declare const StyledGasPriceHeaderBox: _emotion_styled.StyledComponent<Pick<_xylabs_react_flexbox.BusyBoxProps & React.RefAttributes<unknown>, "className" | "style" | "classes" | "children" | "sx" | "ref" | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "height" | "width" | "display" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "order" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "whiteSpace" | "background" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "paper" | "busy" | "busyCircularProps" | "busyColor" | "busyLinearProps" | "busyMinimum" | "busyOpacity" | "busySize" | "busyVariant"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+
+declare const StyledCardHeader: _emotion_styled.StyledComponent<Pick<_mui_material.CardHeaderOwnProps<"span", "span"> & _mui_material_OverridableComponent_js.CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "className" | "style" | "classes" | "sx" | "title" | "action" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps">, "className" | "style" | "classes" | "children" | "sx" | "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+
+interface ToggleRawPayloadBoxProps extends FlexBoxProps {
+    gasPricePayload?: object;
+}
+declare const ToggleRawPayloadBox: React__default.FC<ToggleRawPayloadBoxProps>;
+
+export { EthereumGasPriceAvatar, GasFeeCard, type GasFeeCardProps, type GasPrice, type GasPriceCardHeaderProps, type GasPriceEstimateActionsBoxProps, GasPriceHeaderActionsBox, GasPriceHeaderTypography, type GasPriceHeaderTypographyProps, GasPriceHeadingTypography, type GasPriceHeadingTypographyProps, GasPriceWitnessCardHeader, GasPriceWitnessHeaderBox, type GasPriceWitnessHeaderBoxProps, type GasPriceWitnessUIBasePayload, StyledCardHeader, StyledGasPriceHeaderBox, ToggleRawPayloadBox, type ToggleRawPayloadBoxProps, type UIField };

package/dist/browser/index.mjs

@@ -0,0 +1,273 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/components/Avatar/EthereumGasPriceAvatar.tsx
+import { LocalGasStationRounded as LocalGasStationRoundedIcon } from "@mui/icons-material";
+import { Avatar } from "@mui/material";
+import React from "react";
+var EthereumGasPriceAvatar = /* @__PURE__ */ __name(({ ...props }) => {
+  return /* @__PURE__ */ React.createElement(Avatar, props, /* @__PURE__ */ React.createElement(LocalGasStationRoundedIcon, null));
+}, "EthereumGasPriceAvatar");
+
+// src/components/CardHeader/CardHeader.tsx
+import React5, { forwardRef } from "react";
+
+// src/components/HeaderComponents/Actions.tsx
+import { Chip } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+import React2 from "react";
+var GasPriceHeaderActionsBox = /* @__PURE__ */ __name(({ baseFee, baseFeeLabel = "Base Fee", blockNumber, blockNumberLabel = "Block Number", timestamp, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(FlexRow, {
+    columnGap: 1,
+    rowGap: 1,
+    flexWrap: "wrap",
+    ...props
+  }, timestamp ? /* @__PURE__ */ React2.createElement(Chip, {
+    label: new Date(timestamp).toLocaleString()
+  }) : null, baseFee ? /* @__PURE__ */ React2.createElement(Chip, {
+    label: `${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`
+  }) : null, blockNumber ? /* @__PURE__ */ React2.createElement(Chip, {
+    label: `${blockNumberLabel} - ${blockNumber}`
+  }) : null);
+}, "GasPriceHeaderActionsBox");
+
+// src/components/HeaderComponents/Header/Header.tsx
+import { useTheme as useTheme2 } from "@mui/material";
+import { useGetTokenData } from "@xyo-network/react-shared";
+import React4 from "react";
+
+// src/components/HeaderComponents/Header/Heading.tsx
+import { useTheme } from "@mui/material";
+import { TypographyEx } from "@xyo-network/react-shared";
+import React3 from "react";
+var GasPriceHeadingTypography = /* @__PURE__ */ __name(({ children, heading, networkIcon, ...props }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React3.createElement(TypographyEx, {
+    fontSize: theme.spacing(6),
+    lineHeight: 1,
+    ...props
+  }, heading, " ", networkIcon, " ", children);
+}, "GasPriceHeadingTypography");
+
+// src/components/HeaderComponents/Header/Header.tsx
+var GasPriceHeaderTypography = /* @__PURE__ */ __name(({ heading, children, ...props }) => {
+  const theme = useTheme2();
+  const [ethData] = useGetTokenData([
+    "eth"
+  ]);
+  const networkIcon = /* @__PURE__ */ React4.createElement("img", {
+    height: theme.spacing(4),
+    src: ethData.icon
+  });
+  return /* @__PURE__ */ React4.createElement(GasPriceHeadingTypography, {
+    heading,
+    networkIcon,
+    ...props
+  }, children);
+}, "GasPriceHeaderTypography");
+
+// src/components/layout/Header.tsx
+import { styled } from "@mui/material";
+import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+var StyledGasPriceHeaderBox = styled(FlexRow2, {
+  name: "StyledGasPriceEstimateBox"
+})(({ theme }) => ({
+  alignItems: "end",
+  columnGap: theme.spacing(2),
+  flexWrap: "wrap",
+  justifyContent: "space-between",
+  justifyItems: "space-between",
+  rowGap: theme.spacing(2),
+  width: "100%"
+}));
+
+// src/components/layout/StyledCardHeader.tsx
+import { CardHeader, styled as styled2 } from "@mui/material";
+var StyledCardHeader = styled2(CardHeader, {
+  name: "StyledCardHeader"
+})(({ theme }) => ({
+  flexWrap: "wrap",
+  rowGap: theme.spacing(2)
+}));
+
+// src/components/CardHeader/CardHeader.tsx
+var GasPriceWitnessCardHeader = /* @__PURE__ */ forwardRef(({ title, parsedPayload, ...props }, ref) => /* @__PURE__ */ React5.createElement(StyledCardHeader, {
+  title: /* @__PURE__ */ React5.createElement(GasPriceHeaderTypography, {
+    heading: title
+  }),
+  action: /* @__PURE__ */ React5.createElement(GasPriceHeaderActionsBox, {
+    timestamp: parsedPayload?.timestamp,
+    baseFee: parsedPayload?.baseFee?.value,
+    baseFeeLabel: parsedPayload?.baseFee?.label,
+    blockNumber: parsedPayload?.blockNumber?.value,
+    blockNumberLabel: parsedPayload?.blockNumber?.label
+  }),
+  ref,
+  ...props
+}));
+GasPriceWitnessCardHeader.displayName = "GasPriceWitnessCardHeader";
+
+// src/components/GasFees/Card.tsx
+import { Card, Paper, useTheme as useTheme6 } from "@mui/material";
+import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
+import { CardContentEx } from "@xyo-network/react-card";
+import React10 from "react";
+
+// src/components/GasFees/components/GasPriceBox.tsx
+import { useTheme as useTheme3 } from "@mui/material";
+import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
+import { TypographyEx as TypographyEx3 } from "@xyo-network/react-shared";
+import React7 from "react";
+
+// src/components/GasFees/components/GweiLabelTypography.tsx
+import { TypographyEx as TypographyEx2 } from "@xyo-network/react-shared";
+import React6 from "react";
+var GweiLabelTypography = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React6.createElement(TypographyEx2, {
+  variant: "caption",
+  ...props
+}, "GWEI"), "GweiLabelTypography");
+
+// src/components/GasFees/components/GasPriceBox.tsx
+var GasPriceBox = /* @__PURE__ */ __name(({ gasPrice, ...props }) => {
+  const theme = useTheme3();
+  return /* @__PURE__ */ React7.createElement(FlexRow3, {
+    columnGap: 1.5,
+    rowGap: 1.5,
+    alignItems: "end",
+    ...props
+  }, /* @__PURE__ */ React7.createElement(TypographyEx3, {
+    lineHeight: 1,
+    fontWeight: "200",
+    fontSize: theme.spacing(6),
+    title: gasPrice?.toString() ?? ""
+  }, gasPrice?.toFixed(2)), /* @__PURE__ */ React7.createElement(GweiLabelTypography, {
+    fontSize: theme.spacing(2)
+  }));
+}, "GasPriceBox");
+
+// src/components/GasFees/components/PriorityFeeBox.tsx
+import { LocalGasStationRounded as LocalGasStationRoundedIcon2 } from "@mui/icons-material";
+import { useTheme as useTheme4 } from "@mui/material";
+import { FlexCol, FlexGrowRow } from "@xylabs/react-flexbox";
+import { TypographyEx as TypographyEx4 } from "@xyo-network/react-shared";
+import React8 from "react";
+var PriorityFeeBox = /* @__PURE__ */ __name(({ priorityFee, priorityFeeLabel = "Priority Fee", ...props }) => {
+  const theme = useTheme4();
+  return /* @__PURE__ */ React8.createElement(FlexGrowRow, {
+    width: "100%",
+    justifyContent: "space-between",
+    alignItems: "end",
+    ...props
+  }, /* @__PURE__ */ React8.createElement(FlexCol, {
+    alignItems: "start"
+  }, /* @__PURE__ */ React8.createElement(TypographyEx4, null, priorityFeeLabel), /* @__PURE__ */ React8.createElement(TypographyEx4, {
+    title: priorityFee?.toString() ?? ""
+  }, priorityFee?.toFixed(2), " ", /* @__PURE__ */ React8.createElement(GweiLabelTypography, {
+    fontSize: theme.spacing(1)
+  }))), /* @__PURE__ */ React8.createElement(LocalGasStationRoundedIcon2, null));
+}, "PriorityFeeBox");
+
+// src/components/GasFees/components/SpeedBox.tsx
+import { useTheme as useTheme5 } from "@mui/material";
+import { FlexGrowCol } from "@xylabs/react-flexbox";
+import { TypographyEx as TypographyEx5 } from "@xyo-network/react-shared";
+import React9 from "react";
+var SpeedBox = /* @__PURE__ */ __name(({ speed, ...props }) => {
+  const theme = useTheme5();
+  return speed ? /* @__PURE__ */ React9.createElement(FlexGrowCol, props, /* @__PURE__ */ React9.createElement(TypographyEx5, {
+    fontSize: theme.spacing(3),
+    fontWeight: "200",
+    p: 1
+  }, speed)) : null;
+}, "SpeedBox");
+
+// src/components/GasFees/Card.tsx
+var GasFeeCard = /* @__PURE__ */ __name(({ gasPrice, speedPaperElevation, priorityFee, priorityFeeLabel, speed = "low", ...props }) => {
+  const theme = useTheme6();
+  return /* @__PURE__ */ React10.createElement(Card, {
+    sx: {
+      p: 0
+    },
+    ...props
+  }, /* @__PURE__ */ React10.createElement(CardContentEx, {
+    removePadding: true,
+    sx: {
+      flexDirection: "column",
+      flexGrow: 1,
+      p: 0,
+      rowGap: 2
+    }
+  }, /* @__PURE__ */ React10.createElement(FlexGrowCol2, {
+    bgcolor: theme.palette.secondary.dark,
+    alignItems: "start",
+    p: 2,
+    rowGap: 1.5,
+    color: theme.palette.common.white
+  }, /* @__PURE__ */ React10.createElement(GasPriceBox, {
+    gasPrice
+  }), priorityFee ? /* @__PURE__ */ React10.createElement(PriorityFeeBox, {
+    priorityFee,
+    priorityFeeLabel
+  }) : null), /* @__PURE__ */ React10.createElement(Paper, {
+    elevation: speedPaperElevation,
+    sx: {
+      borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`
+    }
+  }, /* @__PURE__ */ React10.createElement(SpeedBox, {
+    speed
+  }))));
+}, "GasFeeCard");
+
+// src/components/HeaderBox.tsx
+import React11 from "react";
+var GasPriceWitnessHeaderBox = /* @__PURE__ */ __name(({ heading, parsedPayload, ...props }) => {
+  return /* @__PURE__ */ React11.createElement(StyledGasPriceHeaderBox, props, /* @__PURE__ */ React11.createElement(GasPriceHeaderTypography, {
+    heading
+  }), /* @__PURE__ */ React11.createElement(GasPriceHeaderActionsBox, {
+    timestamp: parsedPayload?.timestamp,
+    baseFee: parsedPayload?.baseFee?.value,
+    baseFeeLabel: parsedPayload?.baseFee?.label,
+    blockNumber: parsedPayload?.blockNumber?.value,
+    blockNumberLabel: parsedPayload?.blockNumber?.label
+  }));
+}, "GasPriceWitnessHeaderBox");
+
+// src/components/RawPayload/ToggleRawPayloadBox.tsx
+import { Button, Collapse, Paper as Paper2 } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+import React12, { useState } from "react";
+var ToggleRawPayloadBox = /* @__PURE__ */ __name(({ gasPricePayload, ...props }) => {
+  const [collapse, setCollapse] = useState(false);
+  return gasPricePayload ? /* @__PURE__ */ React12.createElement(FlexCol2, {
+    rowGap: 1,
+    ...props
+  }, /* @__PURE__ */ React12.createElement(Button, {
+    color: "secondary",
+    sx: {
+      bgcolor: "secondary.dark",
+      color: "white"
+    },
+    variant: "contained",
+    onClick: /* @__PURE__ */ __name(() => setCollapse(!collapse), "onClick")
+  }, "Raw Payload"), /* @__PURE__ */ React12.createElement(Collapse, {
+    in: collapse
+  }, /* @__PURE__ */ React12.createElement(Paper2, {
+    elevation: 4,
+    sx: {
+      p: 2
+    }
+  }, /* @__PURE__ */ React12.createElement("pre", null, JSON.stringify(gasPricePayload, null, 2))))) : null;
+}, "ToggleRawPayloadBox");
+export {
+  EthereumGasPriceAvatar,
+  GasFeeCard,
+  GasPriceHeaderActionsBox,
+  GasPriceHeaderTypography,
+  GasPriceHeadingTypography,
+  GasPriceWitnessCardHeader,
+  GasPriceWitnessHeaderBox,
+  StyledCardHeader,
+  StyledGasPriceHeaderBox,
+  ToggleRawPayloadBox
+};
+//# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Avatar/EthereumGasPriceAvatar.tsx","../../src/components/CardHeader/CardHeader.tsx","../../src/components/HeaderComponents/Actions.tsx","../../src/components/HeaderComponents/Header/Header.tsx","../../src/components/HeaderComponents/Header/Heading.tsx","../../src/components/layout/Header.tsx","../../src/components/layout/StyledCardHeader.tsx","../../src/components/GasFees/Card.tsx","../../src/components/GasFees/components/GasPriceBox.tsx","../../src/components/GasFees/components/GweiLabelTypography.tsx","../../src/components/GasFees/components/PriorityFeeBox.tsx","../../src/components/GasFees/components/SpeedBox.tsx","../../src/components/HeaderBox.tsx","../../src/components/RawPayload/ToggleRawPayloadBox.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { Avatar, AvatarProps } from '@mui/material'\nimport React from 'react'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n  return (\n    <Avatar {...props}>\n      <LocalGasStationRoundedIcon />\n    </Avatar>\n  )\n}\n","import { CardProps } from '@mui/material'\nimport React, { forwardRef } from 'react'\n\nimport { GasPriceWitnessUIBasePayload } from '../../types/index.ts'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents/index.ts'\nimport { StyledCardHeader } from '../layout/index.ts'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n  parsedPayload?: GasPriceWitnessUIBasePayload\n  title?: string\n}\nexport const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCardHeaderProps>(({ title, parsedPayload, ...props }, ref) => (\n  <StyledCardHeader\n    title={<GasPriceHeaderTypography heading={title} />}\n    action={(\n      <GasPriceHeaderActionsBox\n        timestamp={parsedPayload?.timestamp}\n        baseFee={parsedPayload?.baseFee?.value}\n        baseFeeLabel={parsedPayload?.baseFee?.label}\n        blockNumber={parsedPayload?.blockNumber?.value}\n        blockNumberLabel={parsedPayload?.blockNumber?.label}\n      />\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nGasPriceWitnessCardHeader.displayName = 'GasPriceWitnessCardHeader'\n","import { Chip } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nexport interface GasPriceEstimateActionsBoxProps extends FlexBoxProps {\n  baseFee?: number\n  baseFeeLabel?: string\n  blockNumber?: number\n  blockNumberLabel?: string\n  timestamp?: number\n}\n\nexport const GasPriceHeaderActionsBox: React.FC<GasPriceEstimateActionsBoxProps> = ({\n  baseFee,\n  baseFeeLabel = 'Base Fee',\n  blockNumber,\n  blockNumberLabel = 'Block Number',\n  timestamp,\n  ...props\n}) => {\n  return (\n    <FlexRow columnGap={1} rowGap={1} flexWrap=\"wrap\" {...props}>\n      {timestamp\n        ? <Chip label={new Date(timestamp).toLocaleString()} />\n        : null}\n      {baseFee\n        ? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} />\n        : null}\n      {blockNumber\n        ? <Chip label={`${blockNumberLabel} - ${blockNumber}`} />\n        : null}\n    </FlexRow>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { TypographyExProps, useGetTokenData } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { GasPriceHeadingTypography } from './Heading.tsx'\n\nexport interface GasPriceHeaderTypographyProps extends TypographyExProps, WithChildren {\n  heading?: string\n}\n\nexport const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({ heading, children, ...props }) => {\n  const theme = useTheme()\n  const [ethData] = useGetTokenData(['eth'])\n  const networkIcon = <img height={theme.spacing(4)} src={ethData.icon} />\n\n  return (\n    <GasPriceHeadingTypography heading={heading} networkIcon={networkIcon} {...props}>\n      {children}\n    </GasPriceHeadingTypography>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\nimport React, { ReactNode } from 'react'\n\nexport interface GasPriceHeadingTypographyProps extends TypographyExProps {\n  children?: ReactNode\n  heading?: string\n  networkIcon?: ReactNode\n}\n\nexport const GasPriceHeadingTypography: React.FC<GasPriceHeadingTypographyProps> = ({ children, heading, networkIcon, ...props }) => {\n  const theme = useTheme()\n  return (\n    <TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>\n      {heading}\n      {' '}\n      {networkIcon}\n      {' '}\n      {children}\n    </TypographyEx>\n  )\n}\n","import { styled } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\n\nexport const StyledGasPriceHeaderBox = styled(FlexRow, { name: 'StyledGasPriceEstimateBox' })(({ theme }) => ({\n  alignItems: 'end',\n  columnGap: theme.spacing(2),\n  flexWrap: 'wrap',\n  justifyContent: 'space-between',\n  justifyItems: 'space-between',\n  rowGap: theme.spacing(2),\n  width: '100%',\n}))\n","import { CardHeader, styled } from '@mui/material'\n\nexport const StyledCardHeader = styled(CardHeader, { name: 'StyledCardHeader' })(({ theme }) => ({\n  flexWrap: 'wrap',\n  rowGap: theme.spacing(2),\n}))\n","import { Card, CardProps, Paper, useTheme } from '@mui/material'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { CardContentEx } from '@xyo-network/react-card'\nimport React from 'react'\n\nimport { GasPriceBox, PriorityFeeBox, SpeedBox } from './components/index.ts'\n\nexport interface GasFeeCardProps extends CardProps {\n  gasPrice?: number\n  priorityFee?: number\n  priorityFeeLabel?: string\n  speed?: string\n  speedPaperElevation?: number\n}\n\nexport const GasFeeCard: React.FC<GasFeeCardProps> = ({ gasPrice, speedPaperElevation, priorityFee, priorityFeeLabel, speed = 'low', ...props }) => {\n  const theme = useTheme()\n\n  return (\n    <Card sx={{ p: 0 }} {...props}>\n      <CardContentEx removePadding sx={{ flexDirection: 'column', flexGrow: 1, p: 0, rowGap: 2 }}>\n        <FlexGrowCol bgcolor={theme.palette.secondary.dark} alignItems=\"start\" p={2} rowGap={1.5} color={theme.palette.common.white}>\n          <GasPriceBox gasPrice={gasPrice} />\n          {priorityFee\n            ? <PriorityFeeBox priorityFee={priorityFee} priorityFeeLabel={priorityFeeLabel} />\n            : null}\n        </FlexGrowCol>\n        <Paper elevation={speedPaperElevation} sx={{ borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }}>\n          <SpeedBox speed={speed} />\n        </Paper>\n      </CardContentEx>\n    </Card>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { GweiLabelTypography } from './GweiLabelTypography.tsx'\n\nexport interface GasPriceBoxProps extends FlexBoxProps {\n  gasPrice?: number\n}\n\nexport const GasPriceBox: React.FC<GasPriceBoxProps> = ({ gasPrice, ...props }) => {\n  const theme = useTheme()\n  return (\n    <FlexRow columnGap={1.5} rowGap={1.5} alignItems=\"end\" {...props}>\n      <TypographyEx lineHeight={1} fontWeight=\"200\" fontSize={theme.spacing(6)} title={gasPrice?.toString() ?? ''}>\n        {gasPrice?.toFixed(2)}\n      </TypographyEx>\n      <GweiLabelTypography fontSize={theme.spacing(2)} />\n    </FlexRow>\n  )\n}\n","import { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport const GweiLabelTypography: React.FC<TypographyExProps> = props => (\n  <TypographyEx variant=\"caption\" {...props}>\n    GWEI\n  </TypographyEx>\n)\n","import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { GweiLabelTypography } from './GweiLabelTypography.tsx'\n\nexport interface PriorityFeeBoxProps extends FlexBoxProps {\n  priorityFee?: number\n  priorityFeeLabel?: string\n}\n\nexport const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({ priorityFee, priorityFeeLabel = 'Priority Fee', ...props }) => {\n  const theme = useTheme()\n\n  return (\n    <FlexGrowRow width=\"100%\" justifyContent=\"space-between\" alignItems=\"end\" {...props}>\n      <FlexCol alignItems=\"start\">\n        <TypographyEx>{priorityFeeLabel}</TypographyEx>\n        <TypographyEx title={priorityFee?.toString() ?? ''}>\n          {priorityFee?.toFixed(2)}\n          {' '}\n          <GweiLabelTypography fontSize={theme.spacing(1)} />\n        </TypographyEx>\n      </FlexCol>\n      <LocalGasStationRoundedIcon />\n    </FlexGrowRow>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport interface SpeedBoxProps extends FlexBoxProps {\n  speed?: string\n}\n\nexport const SpeedBox: React.FC<SpeedBoxProps> = ({ speed, ...props }) => {\n  const theme = useTheme()\n\n  return speed\n    ? (\n        <FlexGrowCol {...props}>\n          <TypographyEx fontSize={theme.spacing(3)} fontWeight=\"200\" p={1}>\n            {speed}\n          </TypographyEx>\n        </FlexGrowCol>\n      )\n    : null\n}\n","import { FlexBoxProps } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nimport { GasPriceWitnessUIBasePayload } from '../types/index.ts'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from './HeaderComponents/index.ts'\nimport { StyledGasPriceHeaderBox } from './layout/index.ts'\n\nexport interface GasPriceWitnessHeaderBoxProps extends FlexBoxProps {\n  heading?: string\n  parsedPayload?: GasPriceWitnessUIBasePayload\n}\n\nexport const GasPriceWitnessHeaderBox: React.FC<GasPriceWitnessHeaderBoxProps> = ({ heading, parsedPayload, ...props }) => {\n  return (\n    <StyledGasPriceHeaderBox {...props}>\n      <GasPriceHeaderTypography heading={heading} />\n      <GasPriceHeaderActionsBox\n        timestamp={parsedPayload?.timestamp}\n        baseFee={parsedPayload?.baseFee?.value}\n        baseFeeLabel={parsedPayload?.baseFee?.label}\n        blockNumber={parsedPayload?.blockNumber?.value}\n        blockNumberLabel={parsedPayload?.blockNumber?.label}\n      />\n    </StyledGasPriceHeaderBox>\n  )\n}\n","import { Button, Collapse, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nexport interface ToggleRawPayloadBoxProps extends FlexBoxProps {\n  gasPricePayload?: object\n}\n\nexport const ToggleRawPayloadBox: React.FC<ToggleRawPayloadBoxProps> = ({ gasPricePayload, ...props }) => {\n  const [collapse, setCollapse] = useState(false)\n  return gasPricePayload\n    ? (\n        <FlexCol rowGap={1} {...props}>\n          <Button color=\"secondary\" sx={{ bgcolor: 'secondary.dark', color: 'white' }} variant=\"contained\" onClick={() => setCollapse(!collapse)}>\n            Raw Payload\n          </Button>\n          <Collapse in={collapse}>\n            <Paper elevation={4} sx={{ p: 2 }}>\n              <pre>{JSON.stringify(gasPricePayload, null, 2)}</pre>\n            </Paper>\n          </Collapse>\n        </FlexCol>\n      )\n    : null\n}\n"],"mappings":"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","names":["LocalGasStationRounded","LocalGasStationRoundedIcon","Avatar","React","EthereumGasPriceAvatar","props","Avatar","LocalGasStationRoundedIcon","React","forwardRef","Chip","FlexRow","React","GasPriceHeaderActionsBox","baseFee","baseFeeLabel","blockNumber","blockNumberLabel","timestamp","props","React","FlexRow","columnGap","rowGap","flexWrap","Chip","label","Date","toLocaleString","toFixed","useTheme","useGetTokenData","React","useTheme","TypographyEx","React","GasPriceHeadingTypography","children","heading","networkIcon","props","theme","useTheme","React","TypographyEx","fontSize","spacing","lineHeight","GasPriceHeaderTypography","heading","children","props","theme","useTheme","ethData","useGetTokenData","networkIcon","React","img","height","spacing","src","icon","GasPriceHeadingTypography","styled","FlexRow","StyledGasPriceHeaderBox","name","theme","alignItems","columnGap","spacing","flexWrap","justifyContent","justifyItems","rowGap","width","CardHeader","styled","StyledCardHeader","name","theme","flexWrap","rowGap","spacing","GasPriceWitnessCardHeader","forwardRef","title","parsedPayload","props","ref","React","StyledCardHeader","GasPriceHeaderTypography","heading","action","GasPriceHeaderActionsBox","timestamp","baseFee","value","baseFeeLabel","label","blockNumber","blockNumberLabel","displayName","Card","Paper","useTheme","FlexGrowCol","CardContentEx","React","useTheme","FlexRow","TypographyEx","React","TypographyEx","React","GweiLabelTypography","props","React","TypographyEx","variant","GasPriceBox","gasPrice","props","theme","useTheme","React","FlexRow","columnGap","rowGap","alignItems","TypographyEx","lineHeight","fontWeight","fontSize","spacing","title","toString","toFixed","GweiLabelTypography","LocalGasStationRounded","LocalGasStationRoundedIcon","useTheme","FlexCol","FlexGrowRow","TypographyEx","React","PriorityFeeBox","priorityFee","priorityFeeLabel","props","theme","useTheme","React","FlexGrowRow","width","justifyContent","alignItems","FlexCol","TypographyEx","title","toString","toFixed","GweiLabelTypography","fontSize","spacing","LocalGasStationRoundedIcon","useTheme","FlexGrowCol","TypographyEx","React","SpeedBox","speed","props","theme","useTheme","React","FlexGrowCol","TypographyEx","fontSize","spacing","fontWeight","p","GasFeeCard","gasPrice","speedPaperElevation","priorityFee","priorityFeeLabel","speed","props","theme","useTheme","React","Card","sx","p","CardContentEx","removePadding","flexDirection","flexGrow","rowGap","FlexGrowCol","bgcolor","palette","secondary","dark","alignItems","color","common","white","GasPriceBox","PriorityFeeBox","Paper","elevation","borderRadius","shape","SpeedBox","React","GasPriceWitnessHeaderBox","heading","parsedPayload","props","React","StyledGasPriceHeaderBox","GasPriceHeaderTypography","GasPriceHeaderActionsBox","timestamp","baseFee","value","baseFeeLabel","label","blockNumber","blockNumberLabel","Button","Collapse","Paper","FlexCol","React","useState","ToggleRawPayloadBox","gasPricePayload","props","collapse","setCollapse","useState","React","FlexCol","rowGap","Button","color","sx","bgcolor","variant","onClick","Collapse","in","Paper","elevation","p","pre","JSON","stringify"]}

package/package.json

@@ -10,15 +10,15 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/react-flexbox": "^3.4.1",
-    "@xylabs/react-shared": "^3.4.1",
-    "@xyo-network/react-card": "^2.81.10",
-    "@xyo-network/react-shared": "^2.81.10"
+    "@xylabs/react-flexbox": "^3.4.2",
+    "@xylabs/react-shared": "^3.4.2",
+    "@xyo-network/react-card": "^2.83.0",
+    "@xyo-network/react-shared": "^2.83.0"
   },
   "devDependencies": {
-    "@storybook/react": "^7.6.20",
-    "@xylabs/ts-scripts-yarn3": "^3.12.4",
-    "@xylabs/tsconfig-react": "^3.12.4",
+    "@storybook/react": "^8.2.7",
+    "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.7",
+    "@xylabs/tsconfig-react": "^4.0.0-rc.7",
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
@@ -32,32 +32,16 @@
   "docs": "dist/docs.json",
   "exports": {
     ".": {
-      "node": {
-        "import": {
-          "types": "./dist/node/index.d.mts",
-          "default": "./dist/node/index.js"
-        },
-        "require": {
-          "types": "./dist/node/index.d.cts",
-          "default": "./dist/node/index.cjs"
-        }
+      "import": {
+        "types": "./dist/browser/index.d.ts",
+        "default": "./dist/browser/index.mjs"
       },
-      "browser": {
-        "import": {
-          "types": "./dist/browser/index.d.mts",
-          "default": "./dist/browser/index.js"
-        },
-        "require": {
-          "types": "./dist/browser/index.d.cts",
-          "default": "./dist/browser/index.cjs"
-        }
-      },
-      "default": "./dist/browser/index.js"
+      "types": "./dist/browser/index.d.ts",
+      "default": "./dist/browser/index.mjs"
     },
     "./package.json": "./package.json"
   },
-  "main": "dist/browser/index.cjs",
-  "module": "dist/browser/index.js",
+  "module": "dist/browser/index.mjs",
   "homepage": "https://xyo.network",
   "keywords": [
     "xyo",
@@ -79,6 +63,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.81.10",
+  "version": "2.83.0",
   "type": "module"
 }

package/src/components/Avatar/EthereumGasPriceAvatar.stories.tsx

@@ -1,14 +1,14 @@
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 
-import { EthereumGasPriceAvatar } from './EthereumGasPriceAvatar.js'
+import { EthereumGasPriceAvatar } from './EthereumGasPriceAvatar.tsx'
 
-// eslint-disable-next-line import/no-default-export
 export default {
   component: EthereumGasPriceAvatar,
   title: 'plugin/blockchain/EthereumGasPrice/Avatar',
 } as Meta
 
-const Template: StoryFn<typeof EthereumGasPriceAvatar> = (props) => <EthereumGasPriceAvatar {...props} />
+const Template: StoryFn<typeof EthereumGasPriceAvatar> = props => <EthereumGasPriceAvatar {...props} />
 
 const Default = Template.bind({})
 Default.args = {}

package/src/components/Avatar/EthereumGasPriceAvatar.tsx

@@ -1,5 +1,6 @@
 import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'
 import { Avatar, AvatarProps } from '@mui/material'
+import React from 'react'
 
 export const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {
   return (

package/src/components/Avatar/index.ts

@@ -1 +1 @@
-export * from './EthereumGasPriceAvatar.js'
+export * from './EthereumGasPriceAvatar.tsx'

package/src/components/CardHeader/CardHeader.tsx

@@ -1,9 +1,9 @@
 import { CardProps } from '@mui/material'
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
-import { GasPriceWitnessUIBasePayload } from '../../types/index.js'
-import { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents/index.js'
-import { StyledCardHeader } from '../layout/index.js'
+import { GasPriceWitnessUIBasePayload } from '../../types/index.ts'
+import { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents/index.ts'
+import { StyledCardHeader } from '../layout/index.ts'
 
 export interface GasPriceCardHeaderProps extends CardProps {
   parsedPayload?: GasPriceWitnessUIBasePayload
@@ -12,7 +12,7 @@ export interface GasPriceCardHeaderProps extends CardProps {
 export const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCardHeaderProps>(({ title, parsedPayload, ...props }, ref) => (
   <StyledCardHeader
     title={<GasPriceHeaderTypography heading={title} />}
-    action={
+    action={(
       <GasPriceHeaderActionsBox
         timestamp={parsedPayload?.timestamp}
         baseFee={parsedPayload?.baseFee?.value}
@@ -20,7 +20,7 @@ export const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCard
         blockNumber={parsedPayload?.blockNumber?.value}
         blockNumberLabel={parsedPayload?.blockNumber?.label}
       />
-    }
+    )}
     ref={ref}
     {...props}
   />

package/src/components/CardHeader/index.ts

@@ -1 +1 @@
-export * from './CardHeader.js'
+export * from './CardHeader.tsx'

package/src/components/GasFees/Card.stories.tsx

@@ -1,14 +1,14 @@
 import { Meta, StoryFn } from '@storybook/react'
 import { FlexCol } from '@xylabs/react-flexbox'
+import React from 'react'
 
-import { GasFeeCard } from './Card.js'
+import { GasFeeCard } from './Card.tsx'
 
 const DefaultArgs = {
   gasPrice: 15.760_184_184_000_002,
   priorityFee: 1.0625,
 }
 
-// eslint-disable-next-line import/no-default-export
 export default {
   component: GasFeeCard,
   title: 'plugin/blockchain/GasPrice/GasFeeCard',

package/src/components/GasFees/Card.tsx

@@ -1,8 +1,9 @@
 import { Card, CardProps, Paper, useTheme } from '@mui/material'
 import { FlexGrowCol } from '@xylabs/react-flexbox'
 import { CardContentEx } from '@xyo-network/react-card'
+import React from 'react'
 
-import { GasPriceBox, PriorityFeeBox, SpeedBox } from './components/index.js'
+import { GasPriceBox, PriorityFeeBox, SpeedBox } from './components/index.ts'
 
 export interface GasFeeCardProps extends CardProps {
   gasPrice?: number
@@ -20,9 +21,9 @@ export const GasFeeCard: React.FC<GasFeeCardProps> = ({ gasPrice, speedPaperElev
       <CardContentEx removePadding sx={{ flexDirection: 'column', flexGrow: 1, p: 0, rowGap: 2 }}>
         <FlexGrowCol bgcolor={theme.palette.secondary.dark} alignItems="start" p={2} rowGap={1.5} color={theme.palette.common.white}>
           <GasPriceBox gasPrice={gasPrice} />
-          {priorityFee ?
-            <PriorityFeeBox priorityFee={priorityFee} priorityFeeLabel={priorityFeeLabel} />
-          : null}
+          {priorityFee
+            ? <PriorityFeeBox priorityFee={priorityFee} priorityFeeLabel={priorityFeeLabel} />
+            : null}
         </FlexGrowCol>
         <Paper elevation={speedPaperElevation} sx={{ borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }}>
           <SpeedBox speed={speed} />

package/src/components/GasFees/components/GasPriceBox.tsx

@@ -1,8 +1,9 @@
 import { useTheme } from '@mui/material'
 import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
 import { TypographyEx } from '@xyo-network/react-shared'
+import React from 'react'
 
-import { GweiLabelTypography } from './GweiLabelTypography.js'
+import { GweiLabelTypography } from './GweiLabelTypography.tsx'
 
 export interface GasPriceBoxProps extends FlexBoxProps {
   gasPrice?: number