@xyo-network/react-gas-price 2.41.0

package/dist/esm/components/layout/StyledCardHeader.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const StyledCardHeader: import("@emotion/styled").StyledComponent<Pick<{
+    action?: import("react").ReactNode;
+    avatar?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").CardHeaderClasses> | undefined;
+    disableTypography?: boolean | undefined;
+    subheader?: import("react").ReactNode;
+    subheaderTypographyProps?: import("@mui/material").TypographyProps<"span", {
+        component?: "span" | undefined;
+    }> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    title?: import("react").ReactNode;
+    titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
+        component?: "span" | undefined;
+    }> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "title" | "action" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps">, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+//# sourceMappingURL=StyledCardHeader.d.ts.map

package/dist/esm/components/layout/StyledCardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledCardHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/StyledCardHeader.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;k+JAG1B,CAAA"}

package/dist/esm/components/layout/StyledCardHeader.js

@@ -0,0 +1,6 @@
+import { CardHeader, styled } from '@mui/material';
+export const StyledCardHeader = styled(CardHeader, { name: 'StyledCardHeader' })(({ theme }) => ({
+    flexWrap: 'wrap',
+    rowGap: theme.spacing(2),
+}));
+//# sourceMappingURL=StyledCardHeader.js.map

package/dist/esm/components/layout/StyledCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledCardHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/StyledCardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/F,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CACzB,CAAC,CAAC,CAAA"}

package/dist/esm/components/layout/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Header';
+export * from './StyledCardHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA"}

package/dist/esm/components/layout/index.js

@@ -0,0 +1,3 @@
+export * from './Header';
+export * from './StyledCardHeader';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA"}

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}

package/dist/esm/types/GasPriceWitnessPayload.d.ts

@@ -0,0 +1,18 @@
+export interface GasPriceWitnessUIBasePayload {
+    website?: string;
+    timestamp?: number;
+    schema?: string;
+    blockNumber?: UIField;
+    gasPrice?: GasPrice[];
+    baseFee?: UIField;
+}
+interface GasPrice {
+    price?: UIField;
+    priorityFee?: UIField;
+}
+interface UIField {
+    label?: string;
+    value?: number;
+}
+export {};
+//# sourceMappingURL=GasPriceWitnessPayload.d.ts.map

package/dist/esm/types/GasPriceWitnessPayload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasPriceWitnessPayload.d.ts","sourceRoot":"","sources":["../../../src/types/GasPriceWitnessPayload.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,4BAA4B;IAE3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,UAAU,QAAQ;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,UAAU,OAAO;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}

package/dist/esm/types/GasPriceWitnessPayload.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=GasPriceWitnessPayload.js.map

package/dist/esm/types/GasPriceWitnessPayload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasPriceWitnessPayload.js","sourceRoot":"","sources":["../../../src/types/GasPriceWitnessPayload.ts"],"names":[],"mappings":""}

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

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

package/dist/esm/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA"}

package/dist/esm/types/index.js

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

package/dist/esm/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA"}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@xyo-network/react-gas-price",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-flexbox": "^2.15.2",
+    "@xylabs/react-shared": "^2.15.2",
+    "@xyo-network/react-card": "^2.41.0",
+    "@xyo-network/react-shared": "^2.41.0",
+    "tslib": "^2.4.1"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^5.10.14",
+    "@mui/material": "^5.10.3",
+    "@mui/styles": "^5.10.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/esm/index.d.ts",
+  "version": "2.41.0"
+}

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

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

package/src/components/Avatar/EthereumGasPriceAvatar.tsx

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

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export * from './EthereumGasPriceAvatar'

package/src/components/CardHeader/CardHeader.tsx

@@ -0,0 +1,25 @@
+import { CardProps } from '@mui/material'
+
+import { GasPriceWitnessUIBasePayload } from '../../types'
+import { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents'
+import { StyledCardHeader } from '../layout'
+
+export interface GasPriceCardHeaderProps extends CardProps {
+  parsedPayload?: GasPriceWitnessUIBasePayload
+  title?: string
+}
+export const GasPriceWitnessCardHeader: React.FC<GasPriceCardHeaderProps> = ({ title, parsedPayload, ...props }) => (
+  <StyledCardHeader
+    title={<GasPriceHeaderTypography heading={title} />}
+    action={
+      <GasPriceHeaderActionsBox
+        timestamp={parsedPayload?.timestamp}
+        baseFee={parsedPayload?.baseFee?.value}
+        baseFeeLabel={parsedPayload?.baseFee?.label}
+        blockNumber={parsedPayload?.blockNumber?.value}
+        blockNumberLabel={parsedPayload?.blockNumber?.label}
+      />
+    }
+    {...props}
+  />
+)

package/src/components/CardHeader/index.ts

@@ -0,0 +1 @@
+export * from './CardHeader'

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

@@ -0,0 +1,44 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+
+import { GasFeeCard } from './Card'
+
+const DefaultArgs = {
+  gasPrice: 15.760184184000002,
+  priorityFee: 1.0625,
+}
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  component: GasFeeCard,
+  title: 'plugin/blockchain/GasPrice/GasFeeCard',
+} as Meta
+
+const Template: ComponentStory<typeof GasFeeCard> = (props) => {
+  return <GasFeeCard {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const Contained = Template.bind({})
+Contained.args = DefaultArgs
+Contained.decorators = [
+  (Story, args) => (
+    <FlexCol alignItems="start">
+      <Story {...args} />
+    </FlexCol>
+  ),
+]
+
+const WithData = Template.bind({})
+WithData.args = DefaultArgs
+
+const WithLabel = Template.bind({})
+WithLabel.args = {
+  ...DefaultArgs,
+  priorityFeeLabel: 'CustomPriorityFeeLabel',
+  speed: 'CustomSpeedLabel',
+}
+
+export { Contained, Default, WithData, WithLabel }

package/src/components/GasFees/Card.tsx

@@ -0,0 +1,31 @@
+import { Card, CardProps, Paper, useTheme } from '@mui/material'
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+import { CardContentEx } from '@xyo-network/react-card'
+
+import { GasPriceBox, PriorityFeeBox, SpeedBox } from './components'
+
+export interface GasFeeCardProps extends CardProps {
+  gasPrice?: number
+  priorityFee?: number
+  priorityFeeLabel?: string
+  speed?: string
+  speedPaperElevation?: number
+}
+
+export const GasFeeCard: React.FC<GasFeeCardProps> = ({ gasPrice, speedPaperElevation, priorityFee, priorityFeeLabel, speed = 'low', ...props }) => {
+  const theme = useTheme()
+
+  return (
+    <Card sx={{ p: 0 }} {...props}>
+      <CardContentEx removePadding sx={{ flexDirection: 'column', flexGrow: 1, p: 0, rowGap: 2 }}>
+        <FlexGrowCol bgcolor={'secondary.dark'} alignItems="start" p={2} rowGap={1.5}>
+          <GasPriceBox gasPrice={gasPrice} />
+          {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} />
+        </Paper>
+      </CardContentEx>
+    </Card>
+  )
+}

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

@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { TypographyEx } from '@xyo-network/react-shared'
+
+import { GweiLabelTypography } from './GweiLabelTypography'
+
+export interface GasPriceBoxProps extends FlexBoxProps {
+  gasPrice?: number
+}
+
+export const GasPriceBox: React.FC<GasPriceBoxProps> = ({ gasPrice, ...props }) => {
+  const theme = useTheme()
+  return (
+    <FlexRow columnGap={1.5} rowGap={1.5} alignItems="end" {...props}>
+      <TypographyEx lineHeight={1} fontWeight="bold" fontSize={theme.spacing(6)} title={gasPrice?.toString() ?? ''}>
+        {gasPrice?.toFixed(2)}
+      </TypographyEx>
+      <GweiLabelTypography fontSize={theme.spacing(2)} />
+    </FlexRow>
+  )
+}

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

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

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

@@ -0,0 +1,27 @@
+import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded'
+import { useTheme } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import { TypographyEx } from '@xyo-network/react-shared'
+
+import { GweiLabelTypography } from './GweiLabelTypography'
+
+export interface PriorityFeeBoxProps extends FlexBoxProps {
+  priorityFee?: number
+  priorityFeeLabel?: string
+}
+
+export const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({ priorityFee, priorityFeeLabel = 'Priority Fee', ...props }) => {
+  const theme = useTheme()
+
+  return (
+    <FlexGrowRow width="100%" justifyContent="space-between" alignItems="end" {...props}>
+      <FlexCol alignItems="start">
+        <TypographyEx>{priorityFeeLabel}</TypographyEx>
+        <TypographyEx title={priorityFee?.toString() ?? ''}>
+          {priorityFee?.toFixed(2)} <GweiLabelTypography fontSize={theme.spacing(1)} />
+        </TypographyEx>
+      </FlexCol>
+      <LocalGasStationRoundedIcon />
+    </FlexGrowRow>
+  )
+}

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

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

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

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

package/src/components/GasFees/index.ts

@@ -0,0 +1 @@
+export * from './Card'

package/src/components/HeaderBox.tsx

@@ -0,0 +1,25 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+
+import { GasPriceWitnessUIBasePayload } from '../types'
+import { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from './HeaderComponents'
+import { StyledGasPriceHeaderBox } from './layout'
+
+export interface GasPriceWitnessHeaderBoxProps extends FlexBoxProps {
+  parsedPayload?: GasPriceWitnessUIBasePayload
+  heading?: string
+}
+
+export const GasPriceWitnessHeaderBox: React.FC<GasPriceWitnessHeaderBoxProps> = ({ heading, parsedPayload, ...props }) => {
+  return (
+    <StyledGasPriceHeaderBox {...props}>
+      <GasPriceHeaderTypography heading={heading} />
+      <GasPriceHeaderActionsBox
+        timestamp={parsedPayload?.timestamp}
+        baseFee={parsedPayload?.baseFee?.value}
+        baseFeeLabel={parsedPayload?.baseFee?.label}
+        blockNumber={parsedPayload?.blockNumber?.value}
+        blockNumberLabel={parsedPayload?.blockNumber?.label}
+      />
+    </StyledGasPriceHeaderBox>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { ComponentStory, Meta } from '@storybook/react'
+
+import { GasPriceHeaderActionsBox } from './Actions'
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  component: GasPriceHeaderActionsBox,
+  title: 'plugin/blockchain/GasPrice/GasPriceHeaderActionsBox',
+} as Meta
+
+const Template: ComponentStory<typeof GasPriceHeaderActionsBox> = (props) => <GasPriceHeaderActionsBox {...props} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithData = Template.bind({})
+WithData.args = {
+  baseFee: 12,
+  baseFeeLabel: 'Custom BaseFee Label',
+  blockNumber: 123465,
+  blockNumberLabel: 'Custom BlockNumber Label',
+  timestamp: 1670530947,
+}
+
+export { Default, WithData }

package/src/components/HeaderComponents/Actions.tsx

@@ -0,0 +1,27 @@
+import { Chip } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+
+export interface GasPriceEstimateActionsBoxProps extends FlexBoxProps {
+  timestamp?: number
+  baseFee?: number
+  baseFeeLabel?: string
+  blockNumber?: number
+  blockNumberLabel?: string
+}
+
+export const GasPriceHeaderActionsBox: React.FC<GasPriceEstimateActionsBoxProps> = ({
+  timestamp,
+  baseFee,
+  baseFeeLabel = 'Base Fee',
+  blockNumber,
+  blockNumberLabel = 'Block Number',
+  ...props
+}) => {
+  return (
+    <FlexRow columnGap={1} rowGap={1} flexWrap="wrap" {...props}>
+      {timestamp ? <Chip label={new Date(timestamp).toLocaleString()} /> : null}
+      {baseFee ? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} /> : null}
+      {blockNumber ? <Chip label={`${blockNumberLabel} - ${blockNumber}`} /> : null}
+    </FlexRow>
+  )
+}

package/src/components/HeaderComponents/Header/Header.tsx

@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material'
+import { WithChildren } from '@xylabs/react-shared'
+import { TypographyExProps, useGetTokenData } from '@xyo-network/react-shared'
+
+import { GasPriceHeadingTypography } from './Heading'
+
+export interface GasPriceHeaderTypographyProps extends TypographyExProps, WithChildren {
+  heading?: string
+}
+
+export const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({ heading, children, ...props }) => {
+  const theme = useTheme()
+  const [ethData] = useGetTokenData(['eth'])
+  const networkIcon = <img height={theme.spacing(4)} src={ethData.icon} />
+
+  return (
+    <GasPriceHeadingTypography heading={heading} networkIcon={networkIcon} {...props}>
+      {children}
+    </GasPriceHeadingTypography>
+  )
+}

package/src/components/HeaderComponents/Header/Heading.tsx

@@ -0,0 +1,18 @@
+import { useTheme } from '@mui/material'
+import { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
+
+export interface GasPriceHeadingTypographyProps extends TypographyExProps {
+  heading?: string
+  children?: ReactNode
+  networkIcon?: ReactNode
+}
+
+export const GasPriceHeadingTypography: React.FC<GasPriceHeadingTypographyProps> = ({ heading, networkIcon, children, ...props }) => {
+  const theme = useTheme()
+  return (
+    <TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>
+      {heading} {networkIcon} {children}
+    </TypographyEx>
+  )
+}

package/src/components/HeaderComponents/Header/index.ts

@@ -0,0 +1,2 @@
+export * from './Header'
+export * from './Heading'

package/src/components/HeaderComponents/index.ts

@@ -0,0 +1,2 @@
+export * from './Actions'
+export * from './Header'

package/src/components/RawPayload/ToggleRawPayloadBox.stories.tsx

@@ -0,0 +1,24 @@
+import { ComponentStory, Meta } from '@storybook/react'
+
+import { ToggleRawPayloadBox } from './ToggleRawPayloadBox'
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  component: ToggleRawPayloadBox,
+  title: 'plugin/blockchain/GasPrice/ToggleRawPayloadBox',
+} as Meta
+
+const Template: ComponentStory<typeof ToggleRawPayloadBox> = (props) => <ToggleRawPayloadBox {...props} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithData = Template.bind({})
+WithData.args = {
+  gasPricePayload: {
+    foo: 'bar',
+    schema: 'network.xyo.some.schema',
+  },
+}
+
+export { Default, WithData }

package/src/components/RawPayload/ToggleRawPayloadBox.tsx

@@ -0,0 +1,23 @@
+import { Button, Collapse, Paper } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { useState } from 'react'
+
+export interface ToggleRawPayloadBoxProps extends FlexBoxProps {
+  gasPricePayload?: object
+}
+
+export const ToggleRawPayloadBox: React.FC<ToggleRawPayloadBoxProps> = ({ gasPricePayload, ...props }) => {
+  const [collapse, setCollapse] = useState(false)
+  return gasPricePayload ? (
+    <FlexCol rowGap={1} {...props}>
+      <Button color="secondary" sx={{ bgcolor: 'secondary.dark', color: 'white' }} variant="contained" onClick={() => setCollapse(!collapse)}>
+        Raw Payload
+      </Button>
+      <Collapse in={collapse}>
+        <Paper elevation={4} sx={{ p: 2 }}>
+          <pre>{JSON.stringify(gasPricePayload, null, 2)}</pre>
+        </Paper>
+      </Collapse>
+    </FlexCol>
+  ) : null
+}

package/src/components/RawPayload/index.ts

@@ -0,0 +1 @@
+export * from './ToggleRawPayloadBox'

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './Avatar'
+export * from './CardHeader'
+export * from './GasFees'
+export * from './HeaderBox'
+export * from './HeaderComponents'
+export * from './layout'
+export * from './RawPayload'

package/src/components/layout/Header.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+
+export const StyledGasPriceHeaderBox = styled(FlexRow, { name: 'StyledGasPriceEstimateBox' })(({ theme }) => ({
+  alignItems: 'end',
+  columnGap: theme.spacing(2),
+  flexWrap: 'wrap',
+  justifyContent: 'space-between',
+  justifyItems: 'space-between',
+  rowGap: theme.spacing(2),
+  width: '100%',
+}))