@xyo-network/react-ethereum-gas-price-blocknative-plugin 5.0.6 → 5.1.0

package/dist/browser/index.mjs

@@ -73,11 +73,12 @@ var BlocknativeGasPriceCardContent = /* @__PURE__ */ __name(({ payload, ...props
     }
   }, parsedPayload && parsedPayload?.gasPrice?.map(({ price }) => /* @__PURE__ */ React.createElement(Grid, {
     key: price?.label,
-    item: true,
-    xs: 12,
-    sm: 6,
-    md: 5,
-    lg: 3
+    size: {
+      xs: 12,
+      sm: 6,
+      md: 5,
+      lg: 3
+    }
   }, /* @__PURE__ */ React.createElement(GasFeeCard, {
     gasPrice: price?.value,
     speed: price?.label,
@@ -156,11 +157,12 @@ var BlocknativeGasPriceDetailsBox = /* @__PURE__ */ __name(({
     }
   }, parsedPayload && parsedPayload?.gasPrice?.map(({ price, priorityFee }) => /* @__PURE__ */ React4.createElement(Grid2, {
     key: price?.label,
-    item: true,
-    xs: 12,
-    sm: 6,
-    md: 5,
-    lg: 3
+    size: {
+      xs: 12,
+      sm: 6,
+      md: 5,
+      lg: 3
+    }
   }, /* @__PURE__ */ React4.createElement(GasFeeCard2, {
     key: price?.label,
     gasPrice: price?.value,

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Card/Card.tsx","../../src/components/Card/CardContent.tsx","../../src/components/hooks/getBlocknativeTransformer.tsx","../../src/components/Card/CardHeader.tsx","../../src/components/lib/constants.ts","../../src/components/Details/Box/BlocknativeGasPriceDetailsBox.tsx","../../src/Plugin.ts"],"sourcesContent":["import type { CardProps } from '@mui/material'\nimport { Card } from '@mui/material'\nimport type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'\nimport React from 'react'\n\nimport { BlocknativeGasPriceCardContent } from './CardContent.tsx'\nimport { BlocknativeGasPriceCardHeader } from './CardHeader.tsx'\n\nexport const BlocknativeGasPriceCard = ({\n  ref, payload, ...props\n}: PayloadRenderProps & CardProps) => {\n  return (\n    <Card ref={ref} {...props}>\n      <BlocknativeGasPriceCardHeader payload={payload} />\n      <BlocknativeGasPriceCardContent payload={payload} />\n    </Card>\n  )\n}\n\nBlocknativeGasPriceCard.displayName = 'BlocknativeGasPriceCard'\n","import type { CardContentProps } from '@mui/material'\nimport { CardContent, Grid } from '@mui/material'\nimport type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport { GasFeeCard, ToggleRawPayloadBox } from '@xyo-network/react-gas-price'\nimport type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'\nimport { PayloadDataMissing } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { getBlocknativeTransformer } from '../hooks/index.ts'\n\nconst isEmpty = (obj?: object) => Object.keys(obj ?? {}).length === 0\n\nexport const BlocknativeGasPriceCardContent: React.FC<PayloadRenderProps & CardContentProps> = ({ payload, ...props }) => {\n  const gasPricePayload = payload ? (payload as EthereumGasBlocknativePayload) : undefined\n  const parsedPayload = getBlocknativeTransformer(gasPricePayload)\n\n  if (isEmpty(gasPricePayload) || !gasPricePayload?.blockPrices?.length) {\n    return <PayloadDataMissing alertBody=\"Payload is missing valid gas fee data.\" sx={{ m: 1 }} />\n  }\n\n  return (\n    <CardContent\n      sx={{\n        display: 'flex', flexDirection: 'column', rowGap: 4,\n      }}\n      {...props}\n    >\n      <Grid\n        container\n        spacing={3}\n        columns={{\n          lg: 15, md: 15, sm: 12, xs: 12,\n        }}\n      >\n        {parsedPayload\n          && parsedPayload?.gasPrice?.map(({ price }) => (\n            <Grid key={price?.label} item xs={12} sm={6} md={5} lg={3}>\n              <GasFeeCard gasPrice={price?.value} speed={price?.label} speedPaperElevation={4} />\n            </Grid>\n          ))}\n      </Grid>\n      <ToggleRawPayloadBox gasPricePayload={gasPricePayload} alignItems=\"start\" pr={1} />\n    </CardContent>\n  )\n}\n\nBlocknativeGasPriceCardContent.displayName = 'BlocknativeGasPriceCardContent'\n","import type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport type { GasPriceWitnessUIBasePayload } from '@xyo-network/react-gas-price'\n\nexport const getBlocknativeTransformer = (payload?: EthereumGasBlocknativePayload): GasPriceWitnessUIBasePayload | undefined => {\n  const blockPrices = payload?.blockPrices?.[0]\n  if (blockPrices && blockPrices.estimatedPrices?.length) {\n    const estimatedPrices = blockPrices?.estimatedPrices\n    const gasPrice = estimatedPrices.map(price => ({\n      price: {\n        label: `Confidence - ${price.confidence}`,\n        value: price.price,\n      },\n      priorityFee: {\n        label: 'maxPriorityFeePerGas',\n        value: price.maxPriorityFeePerGas,\n      },\n    }))\n\n    return {\n      baseFee: {\n        label: 'baseFeePerGas',\n        value: blockPrices.baseFeePerGas,\n      },\n      blockNumber: {\n        label: 'blockNumber',\n        value: blockPrices.blockNumber,\n      },\n      gasPrice,\n      timestamp: payload.timestamp,\n      website: 'https://docs.Blocknative.io/v5/api/providers/provider/#Provider-getFeeData',\n    }\n  }\n}\n","import type { CardHeaderProps } from '@mui/material'\nimport type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport { GasPriceWitnessCardHeader } from '@xyo-network/react-gas-price'\nimport type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'\nimport React from 'react'\n\nimport { getBlocknativeTransformer } from '../hooks/index.ts'\nimport { RenderTitle } from '../lib/index.ts'\n\nexport const BlocknativeGasPriceCardHeader: React.FC<PayloadRenderProps & CardHeaderProps> = ({ payload }) => {\n  const gasPricePayload = payload ? (payload as EthereumGasBlocknativePayload) : undefined\n  const parsedPayload = getBlocknativeTransformer(gasPricePayload)\n  return <GasPriceWitnessCardHeader title={RenderTitle} parsedPayload={parsedPayload} />\n}\n\nBlocknativeGasPriceCardHeader.displayName = 'BlocknativeGasPriceCardHeader'\n","export const RenderTitle = 'Blocknative Gas Tracker'\n","import { Grid } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport {\n  GasFeeCard, GasPriceWitnessHeaderBox, ToggleRawPayloadBox,\n} from '@xyo-network/react-gas-price'\nimport type { PayloadDetailsListRenderProps } from '@xyo-network/react-payload-plugin'\nimport { PayloadDataMissing } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { getBlocknativeTransformer } from '../../hooks/index.ts'\nimport { RenderTitle } from '../../lib/index.ts'\n\nconst isEmpty = (obj?: object) => Object.keys(obj ?? {}).length === 0\n\nexport const BlocknativeGasPriceDetailsBox: React.FC<PayloadDetailsListRenderProps & FlexBoxProps> = ({\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  payload, listMode, ...props\n}) => {\n  const gasPricePayload: EthereumGasBlocknativePayload | undefined = payload ? (payload as EthereumGasBlocknativePayload) : undefined\n  const parsedPayload = getBlocknativeTransformer(gasPricePayload)\n\n  return (\n    <>\n      {isEmpty(gasPricePayload) || !gasPricePayload?.blockPrices?.length\n        ? <PayloadDataMissing alertBody=\"Payload is missing valid gas fee data.\" />\n        : (\n            <FlexCol alignItems=\"start\" rowGap={4} {...props}>\n              <GasPriceWitnessHeaderBox heading={RenderTitle} parsedPayload={parsedPayload} />\n              <Grid\n                container\n                spacing={3}\n                columns={{\n                  lg: 15, md: 15, sm: 12, xs: 12,\n                }}\n              >\n                {parsedPayload\n                  && parsedPayload?.gasPrice?.map(({ price, priorityFee }) => (\n                    <Grid key={price?.label} item xs={12} sm={6} md={5} lg={3}>\n                      <GasFeeCard\n                        key={price?.label}\n                        gasPrice={price?.value}\n                        speed={price?.label}\n                        priorityFee={priorityFee?.value}\n                        priorityFeeLabel={priorityFee?.label}\n                      />\n                    </Grid>\n                  ))}\n              </Grid>\n              <ToggleRawPayloadBox gasPricePayload={gasPricePayload} alignItems=\"start\" />\n            </FlexCol>\n          )}\n    </>\n  )\n}\n\nBlocknativeGasPriceDetailsBox.displayName = 'BlocknativeGasPriceDetailsBox'\n","import { EthereumGasBlocknativeSchema } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport type { Payload } from '@xyo-network/payload-model'\nimport { EthereumGasPriceAvatar } from '@xyo-network/react-gas-price'\nimport type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\nimport { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\n\nimport {\n  BlocknativeGasPriceCardContent, BlocknativeGasPriceCardHeader, BlocknativeGasPriceDetailsBox,\n} from './components/index.ts'\n\nexport const EthereumGasPriceBlocknativePlugin: PayloadRenderPlugin = {\n  ...createPayloadRenderPlugin({\n    canRender: (payload?: Payload) => payload?.schema === EthereumGasBlocknativeSchema,\n    components: {\n      avatar: { image: EthereumGasPriceAvatar },\n      box: { detailsBox: BlocknativeGasPriceDetailsBox },\n      card: {\n        content: BlocknativeGasPriceCardContent,\n        header: BlocknativeGasPriceCardHeader,\n      },\n    },\n    name: 'Ethereum Gas Price Blocknative',\n  }),\n}\n"],"mappings":"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","names":["Card","React","CardContent","Grid","GasFeeCard","ToggleRawPayloadBox","PayloadDataMissing","React","getBlocknativeTransformer","payload","blockPrices","estimatedPrices","length","gasPrice","map","price","label","confidence","value","priorityFee","maxPriorityFeePerGas","baseFee","baseFeePerGas","blockNumber","timestamp","website","isEmpty","obj","Object","keys","length","BlocknativeGasPriceCardContent","payload","props","gasPricePayload","undefined","parsedPayload","getBlocknativeTransformer","blockPrices","PayloadDataMissing","alertBody","sx","m","CardContent","display","flexDirection","rowGap","Grid","container","spacing","columns","lg","md","sm","xs","gasPrice","map","price","key","label","item","GasFeeCard","value","speed","speedPaperElevation","ToggleRawPayloadBox","alignItems","pr","displayName","GasPriceWitnessCardHeader","React","RenderTitle","BlocknativeGasPriceCardHeader","payload","gasPricePayload","undefined","parsedPayload","getBlocknativeTransformer","React","GasPriceWitnessCardHeader","title","RenderTitle","displayName","BlocknativeGasPriceCard","ref","payload","props","React","Card","BlocknativeGasPriceCardHeader","BlocknativeGasPriceCardContent","displayName","Grid","FlexCol","GasFeeCard","GasPriceWitnessHeaderBox","ToggleRawPayloadBox","PayloadDataMissing","React","isEmpty","obj","Object","keys","length","BlocknativeGasPriceDetailsBox","payload","listMode","props","gasPricePayload","undefined","parsedPayload","getBlocknativeTransformer","React","blockPrices","PayloadDataMissing","alertBody","FlexCol","alignItems","rowGap","GasPriceWitnessHeaderBox","heading","RenderTitle","Grid","container","spacing","columns","lg","md","sm","xs","gasPrice","map","price","priorityFee","key","label","item","GasFeeCard","value","speed","priorityFeeLabel","ToggleRawPayloadBox","displayName","EthereumGasBlocknativeSchema","EthereumGasPriceAvatar","createPayloadRenderPlugin","EthereumGasPriceBlocknativePlugin","createPayloadRenderPlugin","canRender","payload","schema","EthereumGasBlocknativeSchema","components","avatar","image","EthereumGasPriceAvatar","box","detailsBox","BlocknativeGasPriceDetailsBox","card","content","BlocknativeGasPriceCardContent","header","BlocknativeGasPriceCardHeader","name"]}
+{"version":3,"sources":["../../src/components/Card/Card.tsx","../../src/components/Card/CardContent.tsx","../../src/components/hooks/getBlocknativeTransformer.tsx","../../src/components/Card/CardHeader.tsx","../../src/components/lib/constants.ts","../../src/components/Details/Box/BlocknativeGasPriceDetailsBox.tsx","../../src/Plugin.ts"],"sourcesContent":["import type { CardProps } from '@mui/material'\nimport { Card } from '@mui/material'\nimport type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'\nimport React from 'react'\n\nimport { BlocknativeGasPriceCardContent } from './CardContent.tsx'\nimport { BlocknativeGasPriceCardHeader } from './CardHeader.tsx'\n\nexport const BlocknativeGasPriceCard = ({\n  ref, payload, ...props\n}: PayloadRenderProps & CardProps) => {\n  return (\n    <Card ref={ref} {...props}>\n      <BlocknativeGasPriceCardHeader payload={payload} />\n      <BlocknativeGasPriceCardContent payload={payload} />\n    </Card>\n  )\n}\n\nBlocknativeGasPriceCard.displayName = 'BlocknativeGasPriceCard'\n","import type { CardContentProps } from '@mui/material'\nimport { CardContent, Grid } from '@mui/material'\nimport type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport { GasFeeCard, ToggleRawPayloadBox } from '@xyo-network/react-gas-price'\nimport type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'\nimport { PayloadDataMissing } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { getBlocknativeTransformer } from '../hooks/index.ts'\n\nconst isEmpty = (obj?: object) => Object.keys(obj ?? {}).length === 0\n\nexport const BlocknativeGasPriceCardContent: React.FC<PayloadRenderProps & CardContentProps> = ({ payload, ...props }) => {\n  const gasPricePayload = payload ? (payload as EthereumGasBlocknativePayload) : undefined\n  const parsedPayload = getBlocknativeTransformer(gasPricePayload)\n\n  if (isEmpty(gasPricePayload) || !gasPricePayload?.blockPrices?.length) {\n    return <PayloadDataMissing alertBody=\"Payload is missing valid gas fee data.\" sx={{ m: 1 }} />\n  }\n\n  return (\n    <CardContent\n      sx={{\n        display: 'flex', flexDirection: 'column', rowGap: 4,\n      }}\n      {...props}\n    >\n      <Grid\n        container\n        spacing={3}\n        columns={{\n          lg: 15, md: 15, sm: 12, xs: 12,\n        }}\n      >\n        {parsedPayload\n          && parsedPayload?.gasPrice?.map(({ price }) => (\n            <Grid\n              key={price?.label}\n              size={{\n                xs: 12, sm: 6, md: 5, lg: 3,\n              }}\n            >\n              <GasFeeCard gasPrice={price?.value} speed={price?.label} speedPaperElevation={4} />\n            </Grid>\n          ))}\n      </Grid>\n      <ToggleRawPayloadBox gasPricePayload={gasPricePayload} alignItems=\"start\" pr={1} />\n    </CardContent>\n  )\n}\n\nBlocknativeGasPriceCardContent.displayName = 'BlocknativeGasPriceCardContent'\n","import type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport type { GasPriceWitnessUIBasePayload } from '@xyo-network/react-gas-price'\n\nexport const getBlocknativeTransformer = (payload?: EthereumGasBlocknativePayload): GasPriceWitnessUIBasePayload | undefined => {\n  const blockPrices = payload?.blockPrices?.[0]\n  if (blockPrices && blockPrices.estimatedPrices?.length) {\n    const estimatedPrices = blockPrices?.estimatedPrices\n    const gasPrice = estimatedPrices.map(price => ({\n      price: {\n        label: `Confidence - ${price.confidence}`,\n        value: price.price,\n      },\n      priorityFee: {\n        label: 'maxPriorityFeePerGas',\n        value: price.maxPriorityFeePerGas,\n      },\n    }))\n\n    return {\n      baseFee: {\n        label: 'baseFeePerGas',\n        value: blockPrices.baseFeePerGas,\n      },\n      blockNumber: {\n        label: 'blockNumber',\n        value: blockPrices.blockNumber,\n      },\n      gasPrice,\n      timestamp: payload.timestamp,\n      website: 'https://docs.Blocknative.io/v5/api/providers/provider/#Provider-getFeeData',\n    }\n  }\n}\n","import type { CardHeaderProps } from '@mui/material'\nimport type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport { GasPriceWitnessCardHeader } from '@xyo-network/react-gas-price'\nimport type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'\nimport React from 'react'\n\nimport { getBlocknativeTransformer } from '../hooks/index.ts'\nimport { RenderTitle } from '../lib/index.ts'\n\nexport const BlocknativeGasPriceCardHeader: React.FC<PayloadRenderProps & CardHeaderProps> = ({ payload }) => {\n  const gasPricePayload = payload ? (payload as EthereumGasBlocknativePayload) : undefined\n  const parsedPayload = getBlocknativeTransformer(gasPricePayload)\n  return <GasPriceWitnessCardHeader title={RenderTitle} parsedPayload={parsedPayload} />\n}\n\nBlocknativeGasPriceCardHeader.displayName = 'BlocknativeGasPriceCardHeader'\n","export const RenderTitle = 'Blocknative Gas Tracker'\n","import { Grid } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport {\n  GasFeeCard, GasPriceWitnessHeaderBox, ToggleRawPayloadBox,\n} from '@xyo-network/react-gas-price'\nimport type { PayloadDetailsListRenderProps } from '@xyo-network/react-payload-plugin'\nimport { PayloadDataMissing } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { getBlocknativeTransformer } from '../../hooks/index.ts'\nimport { RenderTitle } from '../../lib/index.ts'\n\nconst isEmpty = (obj?: object) => Object.keys(obj ?? {}).length === 0\n\nexport const BlocknativeGasPriceDetailsBox: React.FC<PayloadDetailsListRenderProps & FlexBoxProps> = ({\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  payload, listMode, ...props\n}) => {\n  const gasPricePayload: EthereumGasBlocknativePayload | undefined = payload ? (payload as EthereumGasBlocknativePayload) : undefined\n  const parsedPayload = getBlocknativeTransformer(gasPricePayload)\n\n  return (\n    <>\n      {isEmpty(gasPricePayload) || !gasPricePayload?.blockPrices?.length\n        ? <PayloadDataMissing alertBody=\"Payload is missing valid gas fee data.\" />\n        : (\n            <FlexCol alignItems=\"start\" rowGap={4} {...props}>\n              <GasPriceWitnessHeaderBox heading={RenderTitle} parsedPayload={parsedPayload} />\n              <Grid\n                container\n                spacing={3}\n                columns={{\n                  lg: 15, md: 15, sm: 12, xs: 12,\n                }}\n              >\n                {parsedPayload\n                  && parsedPayload?.gasPrice?.map(({ price, priorityFee }) => (\n                    <Grid\n                      key={price?.label}\n                      size={{\n                        xs: 12, sm: 6, md: 5, lg: 3,\n                      }}\n                    >\n                      <GasFeeCard\n                        key={price?.label}\n                        gasPrice={price?.value}\n                        speed={price?.label}\n                        priorityFee={priorityFee?.value}\n                        priorityFeeLabel={priorityFee?.label}\n                      />\n                    </Grid>\n                  ))}\n              </Grid>\n              <ToggleRawPayloadBox gasPricePayload={gasPricePayload} alignItems=\"start\" />\n            </FlexCol>\n          )}\n    </>\n  )\n}\n\nBlocknativeGasPriceDetailsBox.displayName = 'BlocknativeGasPriceDetailsBox'\n","import { EthereumGasBlocknativeSchema } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'\nimport type { Payload } from '@xyo-network/payload-model'\nimport { EthereumGasPriceAvatar } from '@xyo-network/react-gas-price'\nimport type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\nimport { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\n\nimport {\n  BlocknativeGasPriceCardContent, BlocknativeGasPriceCardHeader, BlocknativeGasPriceDetailsBox,\n} from './components/index.ts'\n\nexport const EthereumGasPriceBlocknativePlugin: PayloadRenderPlugin = {\n  ...createPayloadRenderPlugin({\n    canRender: (payload?: Payload) => payload?.schema === EthereumGasBlocknativeSchema,\n    components: {\n      avatar: { image: EthereumGasPriceAvatar },\n      box: { detailsBox: BlocknativeGasPriceDetailsBox },\n      card: {\n        content: BlocknativeGasPriceCardContent,\n        header: BlocknativeGasPriceCardHeader,\n      },\n    },\n    name: 'Ethereum Gas Price Blocknative',\n  }),\n}\n"],"mappings":"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","names":["Card","React","CardContent","Grid","GasFeeCard","ToggleRawPayloadBox","PayloadDataMissing","React","getBlocknativeTransformer","payload","blockPrices","estimatedPrices","length","gasPrice","map","price","label","confidence","value","priorityFee","maxPriorityFeePerGas","baseFee","baseFeePerGas","blockNumber","timestamp","website","isEmpty","obj","Object","keys","length","BlocknativeGasPriceCardContent","payload","props","gasPricePayload","undefined","parsedPayload","getBlocknativeTransformer","blockPrices","PayloadDataMissing","alertBody","sx","m","CardContent","display","flexDirection","rowGap","Grid","container","spacing","columns","lg","md","sm","xs","gasPrice","map","price","key","label","size","GasFeeCard","value","speed","speedPaperElevation","ToggleRawPayloadBox","alignItems","pr","displayName","GasPriceWitnessCardHeader","React","RenderTitle","BlocknativeGasPriceCardHeader","payload","gasPricePayload","undefined","parsedPayload","getBlocknativeTransformer","React","GasPriceWitnessCardHeader","title","RenderTitle","displayName","BlocknativeGasPriceCard","ref","payload","props","React","Card","BlocknativeGasPriceCardHeader","BlocknativeGasPriceCardContent","displayName","Grid","FlexCol","GasFeeCard","GasPriceWitnessHeaderBox","ToggleRawPayloadBox","PayloadDataMissing","React","isEmpty","obj","Object","keys","length","BlocknativeGasPriceDetailsBox","payload","listMode","props","gasPricePayload","undefined","parsedPayload","getBlocknativeTransformer","React","blockPrices","PayloadDataMissing","alertBody","FlexCol","alignItems","rowGap","GasPriceWitnessHeaderBox","heading","RenderTitle","Grid","container","spacing","columns","lg","md","sm","xs","gasPrice","map","price","priorityFee","key","label","size","GasFeeCard","value","speed","priorityFeeLabel","ToggleRawPayloadBox","displayName","EthereumGasBlocknativeSchema","EthereumGasPriceAvatar","createPayloadRenderPlugin","EthereumGasPriceBlocknativePlugin","createPayloadRenderPlugin","canRender","payload","schema","EthereumGasBlocknativeSchema","components","avatar","image","EthereumGasPriceAvatar","box","detailsBox","BlocknativeGasPriceDetailsBox","card","content","BlocknativeGasPriceCardContent","header","BlocknativeGasPriceCardHeader","name"]}

package/dist/types/components/Card/CardContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/CardContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAIrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAE3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,GAAG,gBAAgB,CAgC1F,CAAA"}
+{"version":3,"file":"CardContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/CardContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAIrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAE3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,GAAG,gBAAgB,CAqC1F,CAAA"}

package/dist/types/components/Details/Box/BlocknativeGasPriceDetailsBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlocknativeGasPriceDetailsBox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Details/Box/BlocknativeGasPriceDetailsBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAMzD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAA;AAEtF,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,GAAG,YAAY,CAuChG,CAAA"}
+{"version":3,"file":"BlocknativeGasPriceDetailsBox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Details/Box/BlocknativeGasPriceDetailsBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAMzD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAA;AAEtF,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,GAAG,YAAY,CA4ChG,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-ethereum-gas-price-blocknative-plugin",
-  "version": "5.0.6",
+  "version": "5.1.0",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -39,35 +39,33 @@
   "module": "dist/browser/index.mjs",
   "types": "dist/types/index.d.ts",
   "dependencies": {
-    "@xylabs/react-flexbox": "^6.0.6",
-    "@xyo-network/blocknative-ethereum-gas-payload-plugin": "^3.4.4",
-    "@xyo-network/payload-model": "^3.9.38",
-    "@xyo-network/react-gas-price": "^5.0.6",
-    "@xyo-network/react-payload-plugin": "^5.0.6",
-    "@xyo-network/react-shared": "^5.0.6"
+    "@xylabs/react-flexbox": "^6.1.0",
+    "@xyo-network/blocknative-ethereum-gas-payload-plugin": "^3.4.5",
+    "@xyo-network/payload-model": "^3.10.6",
+    "@xyo-network/react-gas-price": "^5.1.0",
+    "@xyo-network/react-payload-plugin": "^5.1.0",
+    "@xyo-network/react-shared": "^5.1.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.4.8",
-    "@mui/material": "^6.4.8",
-    "@mui/styles": "^6.4.8",
-    "@storybook/react": "^8.6.7",
-    "@types/react": "^19.0.10",
-    "@xylabs/ts-scripts-yarn3": "^6.1.4",
-    "@xylabs/tsconfig-react": "^6.1.4",
-    "@xyo-network/react-storybook": "^5.0.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "storybook": "^8.6.7",
+    "@mui/icons-material": "^7.0.1",
+    "@mui/material": "^7.0.1",
+    "@storybook/react": "^8.6.11",
+    "@types/react": "^19.0.12",
+    "@xylabs/ts-scripts-yarn3": "^6.2.0",
+    "@xylabs/tsconfig-react": "^6.2.0",
+    "@xyo-network/react-storybook": "^5.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^8.6.11",
     "typescript": "^5.8.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@mui/icons-material": "^6",
-    "@mui/material": "^6",
-    "@mui/styles": "^6",
+    "@mui/icons-material": ">=6 <=7",
+    "@mui/material": ">=6 <=7",
     "react": "^19",
     "react-dom": "^19"
   },

package/src/components/Card/CardContent.tsx

@@ -34,7 +34,12 @@ export const BlocknativeGasPriceCardContent: React.FC<PayloadRenderProps & CardC
       >
         {parsedPayload
           && parsedPayload?.gasPrice?.map(({ price }) => (
-            <Grid key={price?.label} item xs={12} sm={6} md={5} lg={3}>
+            <Grid
+              key={price?.label}
+              size={{
+                xs: 12, sm: 6, md: 5, lg: 3,
+              }}
+            >
               <GasFeeCard gasPrice={price?.value} speed={price?.label} speedPaperElevation={4} />
             </Grid>
           ))}

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

@@ -37,7 +37,12 @@ export const BlocknativeGasPriceDetailsBox: React.FC<PayloadDetailsListRenderPro
               >
                 {parsedPayload
                   && parsedPayload?.gasPrice?.map(({ price, priorityFee }) => (
-                    <Grid key={price?.label} item xs={12} sm={6} md={5} lg={3}>
+                    <Grid
+                      key={price?.label}
+                      size={{
+                        xs: 12, sm: 6, md: 5, lg: 3,
+                      }}
+                    >
                       <GasFeeCard
                         key={price?.label}
                         gasPrice={price?.value}