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

package/dist/node/index.mjs

@@ -0,0 +1,277 @@
+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) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React5.createElement(StyledCardHeader, {
+    title: /* @__PURE__ */ React5.createElement(GasPriceHeaderTypography, {
+      heading: title
+    }),
+    action: /* @__PURE__ */ React5.createElement(GasPriceHeaderActionsBox, {
+      timestamp: parsedPayload == null ? void 0 : parsedPayload.timestamp,
+      baseFee: (_a = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _a.value,
+      baseFeeLabel: (_b = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _b.label,
+      blockNumber: (_c = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _c.value,
+      blockNumberLabel: (_d = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _d.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 == null ? void 0 : gasPrice.toString()) ?? ""
+  }, gasPrice == null ? void 0 : 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 == null ? void 0 : priorityFee.toString()) ?? ""
+  }, priorityFee == null ? void 0 : 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 }) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React11.createElement(StyledGasPriceHeaderBox, props, /* @__PURE__ */ React11.createElement(GasPriceHeaderTypography, {
+    heading
+  }), /* @__PURE__ */ React11.createElement(GasPriceHeaderActionsBox, {
+    timestamp: parsedPayload == null ? void 0 : parsedPayload.timestamp,
+    baseFee: (_a = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _a.value,
+    baseFeeLabel: (_b = parsedPayload == null ? void 0 : parsedPayload.baseFee) == null ? void 0 : _b.label,
+    blockNumber: (_c = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _c.value,
+    blockNumberLabel: (_d = parsedPayload == null ? void 0 : parsedPayload.blockNumber) == null ? void 0 : _d.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/node/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/dist/node/types/index.d.cts

@@ -1,2 +1,2 @@
-export * from './GasPriceWitnessPayload.js';
+export * from './GasPriceWitnessPayload.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/node/types/index.d.mts

@@ -1,2 +1,2 @@
-export * from './GasPriceWitnessPayload.js';
+export * from './GasPriceWitnessPayload.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/node/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from './GasPriceWitnessPayload.js';
+export * from './GasPriceWitnessPayload.ts';
 //# sourceMappingURL=index.d.ts.map

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.82.0",
+    "@xyo-network/react-shared": "^2.82.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": "^3.15.16",
+    "@xylabs/tsconfig-react": "^3.15.16",
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
@@ -35,7 +35,7 @@
       "node": {
         "import": {
           "types": "./dist/node/index.d.mts",
-          "default": "./dist/node/index.js"
+          "default": "./dist/node/index.mjs"
         },
         "require": {
           "types": "./dist/node/index.d.cts",
@@ -45,19 +45,19 @@
       "browser": {
         "import": {
           "types": "./dist/browser/index.d.mts",
-          "default": "./dist/browser/index.js"
+          "default": "./dist/browser/index.mjs"
         },
         "require": {
           "types": "./dist/browser/index.d.cts",
           "default": "./dist/browser/index.cjs"
         }
       },
-      "default": "./dist/browser/index.js"
+      "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 +79,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.81.10",
+  "version": "2.82.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

package/src/components/GasFees/components/GweiLabelTypography.tsx

@@ -1,6 +1,7 @@
 import { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'
+import React from 'react'
 
-export const GweiLabelTypography: React.FC<TypographyExProps> = (props) => (
+export const GweiLabelTypography: React.FC<TypographyExProps> = props => (
   <TypographyEx variant="caption" {...props}>
     GWEI
   </TypographyEx>

package/src/components/GasFees/components/PriorityFeeBox.tsx

@@ -2,8 +2,9 @@ import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons
 import { useTheme } from '@mui/material'
 import { FlexBoxProps, FlexCol, FlexGrowRow } 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 PriorityFeeBoxProps extends FlexBoxProps {
   priorityFee?: number
@@ -18,7 +19,9 @@ export const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({ priorityFee, pri
       <FlexCol alignItems="start">
         <TypographyEx>{priorityFeeLabel}</TypographyEx>
         <TypographyEx title={priorityFee?.toString() ?? ''}>
-          {priorityFee?.toFixed(2)} <GweiLabelTypography fontSize={theme.spacing(1)} />
+          {priorityFee?.toFixed(2)}
+          {' '}
+          <GweiLabelTypography fontSize={theme.spacing(1)} />
         </TypographyEx>
       </FlexCol>
       <LocalGasStationRoundedIcon />

package/src/components/GasFees/components/SpeedBox.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@mui/material'
 import { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'
 import { TypographyEx } from '@xyo-network/react-shared'
+import React from 'react'
 
 export interface SpeedBoxProps extends FlexBoxProps {
   speed?: string
@@ -9,11 +10,13 @@ export interface SpeedBoxProps extends FlexBoxProps {
 export const SpeedBox: React.FC<SpeedBoxProps> = ({ speed, ...props }) => {
   const theme = useTheme()
 
-  return speed ?
-      <FlexGrowCol {...props}>
-        <TypographyEx fontSize={theme.spacing(3)} fontWeight="200" p={1}>
-          {speed}
-        </TypographyEx>
-      </FlexGrowCol>
+  return speed
+    ? (
+        <FlexGrowCol {...props}>
+          <TypographyEx fontSize={theme.spacing(3)} fontWeight="200" p={1}>
+            {speed}
+          </TypographyEx>
+        </FlexGrowCol>
+      )
     : null
 }

package/src/components/GasFees/components/index.ts

@@ -1,3 +1,3 @@
-export * from './GasPriceBox.js'
-export * from './PriorityFeeBox.js'
-export * from './SpeedBox.js'
+export * from './GasPriceBox.tsx'
+export * from './PriorityFeeBox.tsx'
+export * from './SpeedBox.tsx'

package/src/components/GasFees/index.ts

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

package/src/components/HeaderBox.tsx

@@ -1,8 +1,9 @@
 import { FlexBoxProps } from '@xylabs/react-flexbox'
+import React from 'react'
 
-import { GasPriceWitnessUIBasePayload } from '../types/index.js'
-import { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from './HeaderComponents/index.js'
-import { StyledGasPriceHeaderBox } from './layout/index.js'
+import { GasPriceWitnessUIBasePayload } from '../types/index.ts'
+import { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from './HeaderComponents/index.ts'
+import { StyledGasPriceHeaderBox } from './layout/index.ts'
 
 export interface GasPriceWitnessHeaderBoxProps extends FlexBoxProps {
   heading?: string

package/src/components/HeaderComponents/Actions.stories.tsx

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