@xyo-network/react-ethereum-gas-price-blocknative-plugin 2.40.36

package/src/components/Card/Card.tsx

@@ -0,0 +1,17 @@
+import { Card, CardProps } from '@mui/material'
+import { XyoPayloadRenderProps } from '@xyo-network/react-payload-plugin'
+import { forwardRef } from 'react'
+
+import { BlocknativeGasPriceCardContent } from './CardContent'
+import { BlocknativeGasPriceCardHeader } from './CardHeader'
+
+export const BlocknativeGasPriceCard = forwardRef<HTMLDivElement, XyoPayloadRenderProps & CardProps>(({ payload, ...props }, ref) => {
+  return (
+    <Card ref={ref} {...props}>
+      <BlocknativeGasPriceCardHeader payload={payload} />
+      <BlocknativeGasPriceCardContent payload={payload} />
+    </Card>
+  )
+})
+
+BlocknativeGasPriceCard.displayName = 'BlocknativeGasPriceCard'

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,34 @@
+import { CardContent, CardContentProps, Grid } from '@mui/material'
+import { XyoEthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
+import { GasFeeCard, ToggleRawPayloadBox } from '@xyo-network/react-gas-price'
+import { XyoPayloadRenderProps } from '@xyo-network/react-payload-plugin'
+import { PayloadDataMissing } from '@xyo-network/react-shared'
+import isEmpty from 'lodash/isEmpty'
+import { forwardRef } from 'react'
+
+import { useBlocknativeTransformer } from '../hooks'
+
+export const BlocknativeGasPriceCardContent = forwardRef<HTMLDivElement, XyoPayloadRenderProps & CardContentProps>(({ payload, ...props }, ref) => {
+  const gasPricePayload = payload ? (payload as XyoEthereumGasBlocknativePayload) : undefined
+  const parsedPayload = useBlocknativeTransformer(gasPricePayload)
+
+  if (isEmpty(gasPricePayload) || !gasPricePayload.blockPrices?.length) {
+    return <PayloadDataMissing alertBody="Payload is missing valid gas fee data." sx={{ m: 1 }} />
+  }
+
+  return (
+    <CardContent ref={ref} sx={{ display: 'flex', flexDirection: 'column', rowGap: 4 }} {...props}>
+      <Grid container spacing={3} columns={{ lg: 15, md: 15, sm: 12, xs: 12 }}>
+        {parsedPayload &&
+          parsedPayload?.gasPrice?.map(({ price }) => (
+            <Grid key={price?.label} item xs={12} sm={6} md={5} lg={3}>
+              <GasFeeCard gasPrice={price?.value} speed={price?.label} speedPaperElevation={4} />
+            </Grid>
+          ))}
+      </Grid>
+      <ToggleRawPayloadBox gasPricePayload={gasPricePayload} alignItems="start" pr={1} />
+    </CardContent>
+  )
+})
+
+BlocknativeGasPriceCardContent.displayName = 'BlocknativeGasPriceCardContent'

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,16 @@
+import { CardHeaderProps } from '@mui/material'
+import { XyoEthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
+import { GasPriceWitnessCardHeader } from '@xyo-network/react-gas-price'
+import { XyoPayloadRenderProps } from '@xyo-network/react-payload-plugin'
+import { forwardRef } from 'react'
+
+import { useBlocknativeTransformer } from '../hooks'
+import { RenderTitle } from '../lib'
+
+export const BlocknativeGasPriceCardHeader = forwardRef<HTMLDivElement, XyoPayloadRenderProps & CardHeaderProps>(({ payload }, ref) => {
+  const gasPricePayload = payload ? (payload as XyoEthereumGasBlocknativePayload) : undefined
+  const parsedPayload = useBlocknativeTransformer(gasPricePayload)
+  return <GasPriceWitnessCardHeader title={RenderTitle} parsedPayload={parsedPayload} ref={ref} />
+})
+
+BlocknativeGasPriceCardHeader.displayName = 'BlocknativeGasPriceCardHeader'

package/src/components/Card/index.ts

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

package/src/components/Details/Box/BlocknativeGasPriceDetailsBox.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { XyoEthereumGasBlocknativeSchema } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
+import { sampleBlocknativeGasPricePayload } from '@xyo-network/react-storybook'
+
+import { BlocknativeGasPriceDetailsBox } from './BlocknativeGasPriceDetailsBox'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: BlocknativeGasPriceDetailsBox,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'plugin/blockchain/BlocknativeGasPrice/DetailsBox',
+} as ComponentMeta<typeof BlocknativeGasPriceDetailsBox>
+
+const Template: ComponentStory<typeof BlocknativeGasPriceDetailsBox> = (args) => <BlocknativeGasPriceDetailsBox {...args} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithData = Template.bind({})
+WithData.args = { payload: sampleBlocknativeGasPricePayload }
+
+const WithMissingData = Template.bind({})
+WithMissingData.args = { payload: { schema: XyoEthereumGasBlocknativeSchema } }
+
+export { Default, WithData, WithMissingData }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Details/Box/BlocknativeGasPriceDetailsBox.tsx

@@ -0,0 +1,48 @@
+import { Grid } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { XyoEthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
+import { GasFeeCard, GasPriceWitnessHeaderBox, ToggleRawPayloadBox } from '@xyo-network/react-gas-price'
+import { XyoPayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin'
+import { PayloadDataMissing } from '@xyo-network/react-shared'
+import isEmpty from 'lodash/isEmpty'
+import { forwardRef } from 'react'
+
+import { useBlocknativeTransformer } from '../../hooks'
+import { RenderTitle } from '../../lib'
+
+export const BlocknativeGasPriceDetailsBox = forwardRef<HTMLDivElement, XyoPayloadDetailsRenderProps & FlexBoxProps>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ({ payload, listMode, ...props }, ref) => {
+    const gasPricePayload: XyoEthereumGasBlocknativePayload | undefined = payload ? (payload as XyoEthereumGasBlocknativePayload) : undefined
+    const parsedPayload = useBlocknativeTransformer(gasPricePayload)
+
+    return (
+      <>
+        {isEmpty(gasPricePayload) || !gasPricePayload.blockPrices?.length ? (
+          <PayloadDataMissing alertBody="Payload is missing valid gas fee data." />
+        ) : (
+          <FlexCol alignItems="start" rowGap={4} {...props} ref={ref}>
+            <GasPriceWitnessHeaderBox heading={RenderTitle} parsedPayload={parsedPayload} />
+            <Grid container spacing={3} columns={{ lg: 15, md: 15, sm: 12, xs: 12 }}>
+              {parsedPayload &&
+                parsedPayload?.gasPrice?.map(({ price, priorityFee }) => (
+                  <Grid key={price?.label} item xs={12} sm={6} md={5} lg={3}>
+                    <GasFeeCard
+                      key={price?.label}
+                      gasPrice={price?.value}
+                      speed={price?.label}
+                      priorityFee={priorityFee?.value}
+                      priorityFeeLabel={priorityFee?.label}
+                    />
+                  </Grid>
+                ))}
+            </Grid>
+            <ToggleRawPayloadBox gasPricePayload={gasPricePayload} alignItems="start" />
+          </FlexCol>
+        )}
+      </>
+    )
+  },
+)
+
+BlocknativeGasPriceDetailsBox.displayName = 'BlocknativeGasPriceDetailsBox'

package/src/components/Details/Box/index.ts

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

package/src/components/Details/index.ts

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

package/src/components/hooks/index.ts

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

package/src/components/hooks/useBlocknativeTransformer.tsx

@@ -0,0 +1,33 @@
+import { XyoEthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
+import { GasPriceWitnessUIBasePayload } from '@xyo-network/react-gas-price'
+
+export const useBlocknativeTransformer = (payload?: XyoEthereumGasBlocknativePayload): GasPriceWitnessUIBasePayload | undefined => {
+  const blockPrices = payload?.blockPrices?.[0]
+  if (blockPrices && blockPrices.estimatedPrices?.length) {
+    const estimatedPrices = blockPrices?.estimatedPrices
+    const gasPrice = estimatedPrices.map((price) => ({
+      price: {
+        label: `Confidence - ${price.confidence}`,
+        value: price.price,
+      },
+      priorityFee: {
+        label: 'maxPriorityFeePerGas',
+        value: price.maxPriorityFeePerGas,
+      },
+    }))
+
+    return {
+      baseFee: {
+        label: 'baseFeePerGas',
+        value: blockPrices.baseFeePerGas,
+      },
+      blockNumber: {
+        label: 'blockNumber',
+        value: blockPrices.blockNumber,
+      },
+      gasPrice,
+      timestamp: payload.timestamp,
+      website: 'https://docs.Blocknative.io/v5/api/providers/provider/#Provider-getFeeData',
+    }
+  }
+}

package/src/components/index.ts

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

package/src/components/lib/constants.ts

@@ -0,0 +1 @@
+export const RenderTitle = 'Blocknative Gas Tracker'

package/src/components/lib/index.ts

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

package/src/index.ts

@@ -0,0 +1,7 @@
+import { EthereumGasPriceBlocknativePlugin } from './Plugin'
+
+export * from './components'
+export * from './Plugin'
+
+// eslint-disable-next-line import/no-default-export
+export default EthereumGasPriceBlocknativePlugin

package/src/types/images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'