@xyo-network/react-ethereum-gas-price-blocknative-plugin 7.5.8 → 7.5.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.mjs +119 -116
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +172 -32
- package/src/Plugin.ts +0 -24
- package/src/components/Card/Card.stories.tsx +0 -30
- package/src/components/Card/Card.tsx +0 -20
- package/src/components/Card/CardContent.tsx +0 -52
- package/src/components/Card/CardHeader.tsx +0 -16
- package/src/components/Card/index.ts +0 -3
- package/src/components/Details/Box/BlocknativeGasPriceDetailsBox.stories.tsx +0 -30
- package/src/components/Details/Box/BlocknativeGasPriceDetailsBox.tsx +0 -63
- package/src/components/Details/Box/index.ts +0 -1
- package/src/components/Details/index.ts +0 -1
- package/src/components/hooks/getBlocknativeTransformer.tsx +0 -33
- package/src/components/hooks/index.ts +0 -1
- package/src/components/index.ts +0 -2
- package/src/components/lib/constants.ts +0 -1
- package/src/components/lib/index.ts +0 -1
- package/src/index.ts +0 -3
- package/src/types/images.d.ts +0 -5
package/dist/browser/index.mjs
CHANGED
|
@@ -1,18 +1,13 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
|
|
4
1
|
// src/components/Card/Card.tsx
|
|
5
2
|
import { Card } from "@mui/material";
|
|
6
|
-
import React3 from "react";
|
|
7
3
|
|
|
8
4
|
// src/components/Card/CardContent.tsx
|
|
9
5
|
import { CardContent, Grid } from "@mui/material";
|
|
10
6
|
import { GasFeeCard, ToggleRawPayloadBox } from "@xyo-network/react-gas-price";
|
|
11
7
|
import { PayloadDataMissing } from "@xyo-network/react-shared";
|
|
12
|
-
import React from "react";
|
|
13
8
|
|
|
14
9
|
// src/components/hooks/getBlocknativeTransformer.tsx
|
|
15
|
-
var getBlocknativeTransformer =
|
|
10
|
+
var getBlocknativeTransformer = (payload) => {
|
|
16
11
|
const blockPrices = payload?.blockPrices?.[0];
|
|
17
12
|
if (blockPrices && blockPrices.estimatedPrices?.length) {
|
|
18
13
|
const estimatedPrices = blockPrices?.estimatedPrices;
|
|
@@ -40,135 +35,147 @@ var getBlocknativeTransformer = /* @__PURE__ */ __name((payload) => {
|
|
|
40
35
|
website: "https://docs.Blocknative.io/v5/api/providers/provider/#Provider-getFeeData"
|
|
41
36
|
};
|
|
42
37
|
}
|
|
43
|
-
}
|
|
38
|
+
};
|
|
44
39
|
|
|
45
40
|
// src/components/Card/CardContent.tsx
|
|
46
|
-
|
|
47
|
-
var
|
|
48
|
-
|
|
41
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
42
|
+
var isEmpty = (obj) => Object.keys(obj ?? {}).length === 0;
|
|
43
|
+
var BlocknativeGasPriceCardContent = ({ payload, ...props }) => {
|
|
44
|
+
const gasPricePayload = payload;
|
|
49
45
|
const parsedPayload = getBlocknativeTransformer(gasPricePayload);
|
|
50
46
|
if (isEmpty(gasPricePayload) || !gasPricePayload?.blockPrices?.length) {
|
|
51
|
-
return /* @__PURE__ */
|
|
52
|
-
alertBody: "Payload is missing valid gas fee data.",
|
|
53
|
-
sx: {
|
|
54
|
-
m: 1
|
|
55
|
-
}
|
|
56
|
-
});
|
|
47
|
+
return /* @__PURE__ */ jsx(PayloadDataMissing, { alertBody: "Payload is missing valid gas fee data.", sx: { m: 1 } });
|
|
57
48
|
}
|
|
58
|
-
return /* @__PURE__ */
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
49
|
+
return /* @__PURE__ */ jsxs(
|
|
50
|
+
CardContent,
|
|
51
|
+
{
|
|
52
|
+
sx: {
|
|
53
|
+
display: "flex",
|
|
54
|
+
flexDirection: "column",
|
|
55
|
+
rowGap: 4
|
|
56
|
+
},
|
|
57
|
+
...props,
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsx(
|
|
60
|
+
Grid,
|
|
61
|
+
{
|
|
62
|
+
container: true,
|
|
63
|
+
spacing: 3,
|
|
64
|
+
columns: {
|
|
65
|
+
lg: 15,
|
|
66
|
+
md: 15,
|
|
67
|
+
sm: 12,
|
|
68
|
+
xs: 12
|
|
69
|
+
},
|
|
70
|
+
children: parsedPayload && parsedPayload?.gasPrice?.map(({ price }) => /* @__PURE__ */ jsx(
|
|
71
|
+
Grid,
|
|
72
|
+
{
|
|
73
|
+
size: {
|
|
74
|
+
xs: 12,
|
|
75
|
+
sm: 6,
|
|
76
|
+
md: 5,
|
|
77
|
+
lg: 3
|
|
78
|
+
},
|
|
79
|
+
children: /* @__PURE__ */ jsx(GasFeeCard, { gasPrice: price?.value, speed: price?.label, speedPaperElevation: 4 })
|
|
80
|
+
},
|
|
81
|
+
price?.label
|
|
82
|
+
))
|
|
83
|
+
}
|
|
84
|
+
),
|
|
85
|
+
/* @__PURE__ */ jsx(ToggleRawPayloadBox, { gasPricePayload, alignItems: "start", pr: 1 })
|
|
86
|
+
]
|
|
81
87
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
speed: price?.label,
|
|
85
|
-
speedPaperElevation: 4
|
|
86
|
-
})))), /* @__PURE__ */ React.createElement(ToggleRawPayloadBox, {
|
|
87
|
-
gasPricePayload,
|
|
88
|
-
alignItems: "start",
|
|
89
|
-
pr: 1
|
|
90
|
-
}));
|
|
91
|
-
}, "BlocknativeGasPriceCardContent");
|
|
88
|
+
);
|
|
89
|
+
};
|
|
92
90
|
BlocknativeGasPriceCardContent.displayName = "BlocknativeGasPriceCardContent";
|
|
93
91
|
|
|
94
92
|
// src/components/Card/CardHeader.tsx
|
|
95
93
|
import { GasPriceWitnessCardHeader } from "@xyo-network/react-gas-price";
|
|
96
|
-
import React2 from "react";
|
|
97
94
|
|
|
98
95
|
// src/components/lib/constants.ts
|
|
99
96
|
var RenderTitle = "Blocknative Gas Tracker";
|
|
100
97
|
|
|
101
98
|
// src/components/Card/CardHeader.tsx
|
|
102
|
-
|
|
103
|
-
|
|
99
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
100
|
+
var BlocknativeGasPriceCardHeader = ({ payload }) => {
|
|
101
|
+
const gasPricePayload = payload;
|
|
104
102
|
const parsedPayload = getBlocknativeTransformer(gasPricePayload);
|
|
105
|
-
return /* @__PURE__ */
|
|
106
|
-
|
|
107
|
-
parsedPayload
|
|
108
|
-
});
|
|
109
|
-
}, "BlocknativeGasPriceCardHeader");
|
|
103
|
+
return /* @__PURE__ */ jsx2(GasPriceWitnessCardHeader, { title: RenderTitle, parsedPayload });
|
|
104
|
+
};
|
|
110
105
|
BlocknativeGasPriceCardHeader.displayName = "BlocknativeGasPriceCardHeader";
|
|
111
106
|
|
|
112
107
|
// src/components/Card/Card.tsx
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
payload
|
|
121
|
-
|
|
122
|
-
}
|
|
108
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
109
|
+
var BlocknativeGasPriceCard = ({
|
|
110
|
+
ref,
|
|
111
|
+
payload,
|
|
112
|
+
...props
|
|
113
|
+
}) => {
|
|
114
|
+
return /* @__PURE__ */ jsxs2(Card, { ref, ...props, children: [
|
|
115
|
+
/* @__PURE__ */ jsx3(BlocknativeGasPriceCardHeader, { payload }),
|
|
116
|
+
/* @__PURE__ */ jsx3(BlocknativeGasPriceCardContent, { payload })
|
|
117
|
+
] });
|
|
118
|
+
};
|
|
123
119
|
BlocknativeGasPriceCard.displayName = "BlocknativeGasPriceCard";
|
|
124
120
|
|
|
125
121
|
// src/components/Details/Box/BlocknativeGasPriceDetailsBox.tsx
|
|
126
122
|
import { Grid as Grid2 } from "@mui/material";
|
|
127
123
|
import { FlexCol } from "@xylabs/react-flexbox";
|
|
128
|
-
import {
|
|
124
|
+
import {
|
|
125
|
+
GasFeeCard as GasFeeCard2,
|
|
126
|
+
GasPriceWitnessHeaderBox,
|
|
127
|
+
ToggleRawPayloadBox as ToggleRawPayloadBox2
|
|
128
|
+
} from "@xyo-network/react-gas-price";
|
|
129
129
|
import { PayloadDataMissing as PayloadDataMissing2 } from "@xyo-network/react-shared";
|
|
130
|
-
import
|
|
131
|
-
var isEmpty2 =
|
|
132
|
-
var BlocknativeGasPriceDetailsBox =
|
|
133
|
-
|
|
130
|
+
import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
131
|
+
var isEmpty2 = (obj) => Object.keys(obj ?? {}).length === 0;
|
|
132
|
+
var BlocknativeGasPriceDetailsBox = ({
|
|
133
|
+
payload,
|
|
134
|
+
listMode,
|
|
135
|
+
...props
|
|
136
|
+
}) => {
|
|
137
|
+
const gasPricePayload = payload;
|
|
134
138
|
const parsedPayload = getBlocknativeTransformer(gasPricePayload);
|
|
135
|
-
return /* @__PURE__ */
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
139
|
+
return /* @__PURE__ */ jsx4(Fragment, { children: isEmpty2(gasPricePayload) || !gasPricePayload?.blockPrices?.length ? /* @__PURE__ */ jsx4(PayloadDataMissing2, { alertBody: "Payload is missing valid gas fee data." }) : /* @__PURE__ */ jsxs3(FlexCol, { alignItems: "start", rowGap: 4, ...props, children: [
|
|
140
|
+
/* @__PURE__ */ jsx4(GasPriceWitnessHeaderBox, { heading: RenderTitle, parsedPayload }),
|
|
141
|
+
/* @__PURE__ */ jsx4(
|
|
142
|
+
Grid2,
|
|
143
|
+
{
|
|
144
|
+
container: true,
|
|
145
|
+
spacing: 3,
|
|
146
|
+
columns: {
|
|
147
|
+
lg: 15,
|
|
148
|
+
md: 15,
|
|
149
|
+
sm: 12,
|
|
150
|
+
xs: 12
|
|
151
|
+
},
|
|
152
|
+
children: parsedPayload && parsedPayload?.gasPrice?.map(({ price, priorityFee }) => /* @__PURE__ */ jsx4(
|
|
153
|
+
Grid2,
|
|
154
|
+
{
|
|
155
|
+
size: {
|
|
156
|
+
xs: 12,
|
|
157
|
+
sm: 6,
|
|
158
|
+
md: 5,
|
|
159
|
+
lg: 3
|
|
160
|
+
},
|
|
161
|
+
children: /* @__PURE__ */ jsx4(
|
|
162
|
+
GasFeeCard2,
|
|
163
|
+
{
|
|
164
|
+
gasPrice: price?.value,
|
|
165
|
+
speed: price?.label,
|
|
166
|
+
priorityFee: priorityFee?.value,
|
|
167
|
+
priorityFeeLabel: priorityFee?.label
|
|
168
|
+
},
|
|
169
|
+
price?.label
|
|
170
|
+
)
|
|
171
|
+
},
|
|
172
|
+
price?.label
|
|
173
|
+
))
|
|
174
|
+
}
|
|
175
|
+
),
|
|
176
|
+
/* @__PURE__ */ jsx4(ToggleRawPayloadBox2, { gasPricePayload, alignItems: "start" })
|
|
177
|
+
] }) });
|
|
178
|
+
};
|
|
172
179
|
BlocknativeGasPriceDetailsBox.displayName = "BlocknativeGasPriceDetailsBox";
|
|
173
180
|
|
|
174
181
|
// src/Plugin.ts
|
|
@@ -177,14 +184,10 @@ import { EthereumGasPriceAvatar } from "@xyo-network/react-gas-price";
|
|
|
177
184
|
import { createPayloadRenderPlugin } from "@xyo-network/react-payload-plugin";
|
|
178
185
|
var EthereumGasPriceBlocknativePlugin = {
|
|
179
186
|
...createPayloadRenderPlugin({
|
|
180
|
-
canRender:
|
|
187
|
+
canRender: (payload) => payload?.schema === EthereumGasBlocknativeSchema,
|
|
181
188
|
components: {
|
|
182
|
-
avatar: {
|
|
183
|
-
|
|
184
|
-
},
|
|
185
|
-
box: {
|
|
186
|
-
detailsBox: BlocknativeGasPriceDetailsBox
|
|
187
|
-
},
|
|
189
|
+
avatar: { image: EthereumGasPriceAvatar },
|
|
190
|
+
box: { detailsBox: BlocknativeGasPriceDetailsBox },
|
|
188
191
|
card: {
|
|
189
192
|
content: BlocknativeGasPriceCardContent,
|
|
190
193
|
header: BlocknativeGasPriceCardHeader
|
|
@@ -1 +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\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\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"]}
|
|
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 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 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\n payload, listMode, ...props\n}) => {\n const gasPricePayload = 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":["jsx","jsx","jsxs","Grid","GasFeeCard","ToggleRawPayloadBox","PayloadDataMissing","jsx","jsxs","isEmpty","PayloadDataMissing","Grid","GasFeeCard","ToggleRawPayloadBox"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-ethereum-gas-price-blocknative-plugin",
|
|
3
|
-
"version": "7.5.
|
|
3
|
+
"version": "7.5.12",
|
|
4
4
|
"description": "Common React library for all XYO projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"xyo",
|
|
@@ -36,49 +36,189 @@
|
|
|
36
36
|
},
|
|
37
37
|
"./package.json": "./package.json"
|
|
38
38
|
},
|
|
39
|
-
"module": "dist/browser/index.mjs",
|
|
40
|
-
"types": "dist/browser/index.d.ts",
|
|
41
39
|
"files": [
|
|
42
40
|
"dist",
|
|
43
|
-
"
|
|
41
|
+
"README.md"
|
|
44
42
|
],
|
|
45
43
|
"dependencies": {
|
|
46
|
-
"@
|
|
47
|
-
"@xyo-network/
|
|
48
|
-
"@xyo-network/react-
|
|
49
|
-
"@xyo-network/react-payload-plugin": "7.5.8",
|
|
50
|
-
"@xyo-network/react-shared": "7.5.8"
|
|
44
|
+
"@xyo-network/react-gas-price": "~7.5.12",
|
|
45
|
+
"@xyo-network/react-shared": "~7.5.12",
|
|
46
|
+
"@xyo-network/react-payload-plugin": "~7.5.12"
|
|
51
47
|
},
|
|
52
48
|
"devDependencies": {
|
|
53
|
-
"@
|
|
54
|
-
"@emotion/
|
|
55
|
-
"@
|
|
56
|
-
"@
|
|
57
|
-
"@
|
|
49
|
+
"@bitauth/libauth": "~3.0.0",
|
|
50
|
+
"@emotion/react": "^11.14.0",
|
|
51
|
+
"@emotion/styled": "^11.14.1",
|
|
52
|
+
"@metamask/providers": "^22.1.1",
|
|
53
|
+
"@mui/icons-material": "^7.3.10",
|
|
54
|
+
"@mui/material": "^7.3.10",
|
|
55
|
+
"@mui/system": "^7.3.10",
|
|
56
|
+
"@mui/x-tree-view": "~8.27.2",
|
|
57
|
+
"@opentelemetry/api": "^1.9.1",
|
|
58
|
+
"@opentelemetry/sdk-trace-base": "^2.7.0",
|
|
59
|
+
"@scure/base": "~2.2.0",
|
|
60
|
+
"@scure/bip39": "~2.2.0",
|
|
61
|
+
"@storybook/react-vite": "~10.3.5",
|
|
62
|
+
"@textea/json-viewer": "~4.0.1",
|
|
63
|
+
"@types/node": "~25.6.0",
|
|
58
64
|
"@types/react": "^19.2.14",
|
|
59
|
-
"@xylabs/
|
|
60
|
-
"@xylabs/
|
|
61
|
-
"@xylabs/
|
|
62
|
-
"@xylabs/
|
|
63
|
-
"@xylabs/
|
|
64
|
-
"@
|
|
65
|
-
"@
|
|
66
|
-
"react": "
|
|
67
|
-
"react-
|
|
68
|
-
"
|
|
65
|
+
"@xylabs/geo": "^5.0.100",
|
|
66
|
+
"@xylabs/react-async-effect": "~7.1.20",
|
|
67
|
+
"@xylabs/react-button": "~7.1.20",
|
|
68
|
+
"@xylabs/react-dialogs": "~7.1.20",
|
|
69
|
+
"@xylabs/react-flexbox": "~7.1.20",
|
|
70
|
+
"@xylabs/react-hooks": "~7.1.20",
|
|
71
|
+
"@xylabs/react-identicon": "~7.1.20",
|
|
72
|
+
"@xylabs/react-link": "~7.1.20",
|
|
73
|
+
"@xylabs/react-promise": "~7.1.20",
|
|
74
|
+
"@xylabs/react-quick-tip-button": "~7.1.20",
|
|
75
|
+
"@xylabs/react-select": "~7.1.20",
|
|
76
|
+
"@xylabs/react-shared": "~7.1.20",
|
|
77
|
+
"@xylabs/react-theme": "~7.1.20",
|
|
78
|
+
"@xylabs/sdk-js": "^5.0.100",
|
|
79
|
+
"@xylabs/threads": "~5.0.100",
|
|
80
|
+
"@xylabs/toolchain": "~7.11.9",
|
|
81
|
+
"@xylabs/tsconfig": "^7.11.9",
|
|
82
|
+
"@xylabs/tsconfig-dom": "^7.11.9",
|
|
83
|
+
"@xylabs/tsconfig-react": "~7.11.9",
|
|
84
|
+
"@xylabs/zod": "~5.0.100",
|
|
85
|
+
"@xyo-network/account": "~5.5.1",
|
|
86
|
+
"@xyo-network/account-model": "^5.5.1",
|
|
87
|
+
"@xyo-network/api": "~5.5.1",
|
|
88
|
+
"@xyo-network/api-models": "~5.5.1",
|
|
89
|
+
"@xyo-network/blocknative-ethereum-gas-payload-plugin": "~5.4.9",
|
|
90
|
+
"@xyo-network/boundwitness-builder": "^5.5.1",
|
|
91
|
+
"@xyo-network/boundwitness-model": "^5.5.1",
|
|
92
|
+
"@xyo-network/boundwitness-validator": "^5.5.1",
|
|
93
|
+
"@xyo-network/boundwitness-wrapper": "~5.5.1",
|
|
94
|
+
"@xyo-network/config-payload-plugin": "~5.5.1",
|
|
95
|
+
"@xyo-network/diviner-model": "^5.5.5",
|
|
96
|
+
"@xyo-network/diviner-schema-list": "~5.5.5",
|
|
97
|
+
"@xyo-network/diviner-schema-stats": "~5.5.2",
|
|
98
|
+
"@xyo-network/huri": "^5.5.1",
|
|
99
|
+
"@xyo-network/manifest-model": "~5.5.1",
|
|
100
|
+
"@xyo-network/module-abstract": "^5.5.5",
|
|
101
|
+
"@xyo-network/module-model": "^5.5.5",
|
|
102
|
+
"@xyo-network/node-core-types": "~4.1.10",
|
|
103
|
+
"@xyo-network/node-memory": "~5.5.5",
|
|
104
|
+
"@xyo-network/node-model": "^5.5.5",
|
|
105
|
+
"@xyo-network/payload-builder": "^5.5.1",
|
|
106
|
+
"@xyo-network/payload-model": "^5.5.1",
|
|
107
|
+
"@xyo-network/payload-plugin": "^5.5.1",
|
|
108
|
+
"@xyo-network/payload-validator": "^5.5.1",
|
|
109
|
+
"@xyo-network/payload-wrapper": "~5.5.1",
|
|
110
|
+
"@xyo-network/query-payload-plugin": "~5.5.1",
|
|
111
|
+
"@xyo-network/schema-cache": "~5.5.1",
|
|
112
|
+
"@xyo-network/schema-payload-plugin": "~5.5.1",
|
|
113
|
+
"@xyo-network/sdk-js": "^5.5.5",
|
|
114
|
+
"@xyo-network/sdk-protocol-js": "~5.5.1",
|
|
115
|
+
"@xyo-network/typeof": "~5.3.30",
|
|
116
|
+
"@xyo-network/wallet": "~5.5.1",
|
|
117
|
+
"@xyo-network/wallet-model": "^5.5.1",
|
|
118
|
+
"ajv": "^8.18.0",
|
|
119
|
+
"async-mutex": "^0.5.0",
|
|
120
|
+
"axios": "^1.15.2",
|
|
121
|
+
"bn.js": "^5.2.3",
|
|
122
|
+
"bowser": "^2.14.1",
|
|
123
|
+
"buffer": "^6.0.3",
|
|
124
|
+
"chalk": "^5.6.2",
|
|
125
|
+
"debug": "~4.4.3",
|
|
126
|
+
"esbuild": "~0.28.0",
|
|
127
|
+
"eslint": "^10.2.1",
|
|
128
|
+
"ethers": "^6.16.0",
|
|
129
|
+
"fast-deep-equal": "~3.1.3",
|
|
130
|
+
"hash-wasm": "~4.12.0",
|
|
131
|
+
"idb": "^8.0.3",
|
|
132
|
+
"js-cookie": "~3.0.5",
|
|
133
|
+
"lru-cache": "^11.3.5",
|
|
134
|
+
"mapbox-gl": "^3.22.0",
|
|
135
|
+
"observable-fns": "~0.6.1",
|
|
136
|
+
"pako": "^2.1.0",
|
|
137
|
+
"react": "^19.2.5",
|
|
138
|
+
"react-dom": "^19.2.5",
|
|
139
|
+
"react-router-dom": "^7.14.2",
|
|
140
|
+
"spark-md5": "~3.0.2",
|
|
141
|
+
"store2": "~2.14.4",
|
|
142
|
+
"storybook": "^10.3.5",
|
|
69
143
|
"typescript": "^5.9.3",
|
|
70
|
-
"vite": "
|
|
71
|
-
"
|
|
144
|
+
"vite": "^8.0.10",
|
|
145
|
+
"wasm-feature-detect": "~1.8.0",
|
|
146
|
+
"webextension-polyfill": "^0.12.0",
|
|
147
|
+
"zod": "^4.3.6",
|
|
148
|
+
"@xyo-network/react-storybook": "~7.5.12"
|
|
72
149
|
},
|
|
73
150
|
"peerDependencies": {
|
|
74
|
-
"@
|
|
75
|
-
"@
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
151
|
+
"@emotion/react": "^11.14.0",
|
|
152
|
+
"@emotion/styled": "^11.14.1",
|
|
153
|
+
"@mui/icons-material": "^7.3.10",
|
|
154
|
+
"@mui/material": "^7.3.10",
|
|
155
|
+
"@mui/system": "^7.3.10",
|
|
156
|
+
"@mui/x-tree-view": "~8.27.2",
|
|
157
|
+
"@opentelemetry/api": "^1.9.1",
|
|
158
|
+
"@opentelemetry/sdk-trace-base": "^2.7.0",
|
|
159
|
+
"@scure/base": "~2.2.0",
|
|
160
|
+
"@textea/json-viewer": "~4.0.1",
|
|
161
|
+
"@xylabs/react-async-effect": "~7.1.20",
|
|
162
|
+
"@xylabs/react-button": "~7.1.20",
|
|
163
|
+
"@xylabs/react-dialogs": "~7.1.20",
|
|
164
|
+
"@xylabs/react-flexbox": "~7.1.20",
|
|
165
|
+
"@xylabs/react-hooks": "~7.1.20",
|
|
166
|
+
"@xylabs/react-identicon": "~7.1.20",
|
|
167
|
+
"@xylabs/react-link": "~7.1.20",
|
|
168
|
+
"@xylabs/react-promise": "~7.1.20",
|
|
169
|
+
"@xylabs/react-quick-tip-button": "~7.1.20",
|
|
170
|
+
"@xylabs/react-select": "~7.1.20",
|
|
171
|
+
"@xylabs/react-shared": "~7.1.20",
|
|
172
|
+
"@xylabs/react-theme": "~7.1.20",
|
|
173
|
+
"@xylabs/sdk-js": "^5.0.100",
|
|
174
|
+
"@xylabs/tsconfig": "^7.11.9",
|
|
175
|
+
"@xylabs/tsconfig-dom": "^7.11.9",
|
|
176
|
+
"@xylabs/zod": "~5.0.100",
|
|
177
|
+
"@xyo-network/account": "~5.5.1",
|
|
178
|
+
"@xyo-network/account-model": "^5.5.1",
|
|
179
|
+
"@xyo-network/blocknative-ethereum-gas-payload-plugin": "~5.4.9",
|
|
180
|
+
"@xyo-network/boundwitness-builder": "^5.5.1",
|
|
181
|
+
"@xyo-network/boundwitness-model": "^5.5.1",
|
|
182
|
+
"@xyo-network/boundwitness-validator": "^5.5.1",
|
|
183
|
+
"@xyo-network/boundwitness-wrapper": "~5.5.1",
|
|
184
|
+
"@xyo-network/config-payload-plugin": "~5.5.1",
|
|
185
|
+
"@xyo-network/diviner-model": "^5.5.5",
|
|
186
|
+
"@xyo-network/diviner-schema-list": "~5.5.5",
|
|
187
|
+
"@xyo-network/diviner-schema-stats": "~5.5.2",
|
|
188
|
+
"@xyo-network/manifest-model": "~5.5.1",
|
|
189
|
+
"@xyo-network/module-abstract": "^5.5.5",
|
|
190
|
+
"@xyo-network/module-model": "^5.5.5",
|
|
191
|
+
"@xyo-network/node-core-types": "~4.1.10",
|
|
192
|
+
"@xyo-network/node-memory": "~5.5.5",
|
|
193
|
+
"@xyo-network/node-model": "^5.5.5",
|
|
194
|
+
"@xyo-network/payload-builder": "^5.5.1",
|
|
195
|
+
"@xyo-network/payload-model": "^5.5.1",
|
|
196
|
+
"@xyo-network/payload-validator": "^5.5.1",
|
|
197
|
+
"@xyo-network/query-payload-plugin": "~5.5.1",
|
|
198
|
+
"@xyo-network/schema-cache": "~5.5.1",
|
|
199
|
+
"@xyo-network/schema-payload-plugin": "~5.5.1",
|
|
200
|
+
"@xyo-network/typeof": "~5.3.30",
|
|
201
|
+
"@xyo-network/wallet-model": "^5.5.1",
|
|
202
|
+
"ajv": "^8.18.0",
|
|
203
|
+
"async-mutex": "^0.5.0",
|
|
204
|
+
"axios": "^1.15.2",
|
|
205
|
+
"bn.js": "^5.2.3",
|
|
206
|
+
"bowser": "^2.14.1",
|
|
207
|
+
"buffer": "^6.0.3",
|
|
208
|
+
"chalk": "^5.6.2",
|
|
209
|
+
"ethers": "^6.16.0",
|
|
210
|
+
"fast-deep-equal": "~3.1.3",
|
|
211
|
+
"js-cookie": "~3.0.5",
|
|
212
|
+
"lru-cache": "^11.3.5",
|
|
213
|
+
"pako": "^2.1.0",
|
|
214
|
+
"react": "^19.2.5",
|
|
215
|
+
"react-dom": "^19.2.5",
|
|
216
|
+
"react-router-dom": "^7.14.2",
|
|
217
|
+
"spark-md5": "~3.0.2",
|
|
218
|
+
"zod": "^4.3.6"
|
|
79
219
|
},
|
|
80
220
|
"publishConfig": {
|
|
81
221
|
"access": "public"
|
|
82
222
|
},
|
|
83
223
|
"docs": "dist/docs.json"
|
|
84
|
-
}
|
|
224
|
+
}
|
package/src/Plugin.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { EthereumGasBlocknativeSchema } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
|
|
2
|
-
import type { Payload } from '@xyo-network/payload-model'
|
|
3
|
-
import { EthereumGasPriceAvatar } from '@xyo-network/react-gas-price'
|
|
4
|
-
import type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
|
|
5
|
-
import { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
|
|
6
|
-
|
|
7
|
-
import {
|
|
8
|
-
BlocknativeGasPriceCardContent, BlocknativeGasPriceCardHeader, BlocknativeGasPriceDetailsBox,
|
|
9
|
-
} from './components/index.ts'
|
|
10
|
-
|
|
11
|
-
export const EthereumGasPriceBlocknativePlugin: PayloadRenderPlugin = {
|
|
12
|
-
...createPayloadRenderPlugin({
|
|
13
|
-
canRender: (payload?: Payload) => payload?.schema === EthereumGasBlocknativeSchema,
|
|
14
|
-
components: {
|
|
15
|
-
avatar: { image: EthereumGasPriceAvatar },
|
|
16
|
-
box: { detailsBox: BlocknativeGasPriceDetailsBox },
|
|
17
|
-
card: {
|
|
18
|
-
content: BlocknativeGasPriceCardContent,
|
|
19
|
-
header: BlocknativeGasPriceCardHeader,
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
name: 'Ethereum Gas Price Blocknative',
|
|
23
|
-
}),
|
|
24
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import { EthereumGasBlocknativeSchema } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
|
|
3
|
-
import { sampleBlocknativeGasPricePayload } from '@xyo-network/react-storybook'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
|
|
6
|
-
import { BlocknativeGasPriceCard } from './Card.tsx'
|
|
7
|
-
|
|
8
|
-
const StorybookEntry = {
|
|
9
|
-
argTypes: {},
|
|
10
|
-
component: BlocknativeGasPriceCard,
|
|
11
|
-
parameters: { docs: { page: null } },
|
|
12
|
-
title: 'plugin/blockchain/BlocknativeGasPrice/Card',
|
|
13
|
-
} as Meta<typeof BlocknativeGasPriceCard>
|
|
14
|
-
|
|
15
|
-
const Template: StoryFn<typeof BlocknativeGasPriceCard> = args => <BlocknativeGasPriceCard {...args} />
|
|
16
|
-
|
|
17
|
-
const Default = Template.bind({})
|
|
18
|
-
Default.args = {}
|
|
19
|
-
|
|
20
|
-
const WithData = Template.bind({})
|
|
21
|
-
WithData.args = { payload: sampleBlocknativeGasPricePayload }
|
|
22
|
-
|
|
23
|
-
const WithMissingData = Template.bind({})
|
|
24
|
-
WithMissingData.args = { payload: { schema: EthereumGasBlocknativeSchema } }
|
|
25
|
-
|
|
26
|
-
export {
|
|
27
|
-
Default, WithData, WithMissingData,
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export default StorybookEntry
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { CardProps } from '@mui/material'
|
|
2
|
-
import { Card } from '@mui/material'
|
|
3
|
-
import type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
|
|
6
|
-
import { BlocknativeGasPriceCardContent } from './CardContent.tsx'
|
|
7
|
-
import { BlocknativeGasPriceCardHeader } from './CardHeader.tsx'
|
|
8
|
-
|
|
9
|
-
export const BlocknativeGasPriceCard = ({
|
|
10
|
-
ref, payload, ...props
|
|
11
|
-
}: PayloadRenderProps & CardProps) => {
|
|
12
|
-
return (
|
|
13
|
-
<Card ref={ref} {...props}>
|
|
14
|
-
<BlocknativeGasPriceCardHeader payload={payload} />
|
|
15
|
-
<BlocknativeGasPriceCardContent payload={payload} />
|
|
16
|
-
</Card>
|
|
17
|
-
)
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
BlocknativeGasPriceCard.displayName = 'BlocknativeGasPriceCard'
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import type { CardContentProps } from '@mui/material'
|
|
2
|
-
import { CardContent, Grid } from '@mui/material'
|
|
3
|
-
import type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
|
|
4
|
-
import { GasFeeCard, ToggleRawPayloadBox } from '@xyo-network/react-gas-price'
|
|
5
|
-
import type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'
|
|
6
|
-
import { PayloadDataMissing } from '@xyo-network/react-shared'
|
|
7
|
-
import React from 'react'
|
|
8
|
-
|
|
9
|
-
import { getBlocknativeTransformer } from '../hooks/index.ts'
|
|
10
|
-
|
|
11
|
-
const isEmpty = (obj?: object) => Object.keys(obj ?? {}).length === 0
|
|
12
|
-
|
|
13
|
-
export const BlocknativeGasPriceCardContent: React.FC<PayloadRenderProps & CardContentProps> = ({ payload, ...props }) => {
|
|
14
|
-
const gasPricePayload = payload ? (payload as EthereumGasBlocknativePayload) : undefined
|
|
15
|
-
const parsedPayload = getBlocknativeTransformer(gasPricePayload)
|
|
16
|
-
|
|
17
|
-
if (isEmpty(gasPricePayload) || !gasPricePayload?.blockPrices?.length) {
|
|
18
|
-
return <PayloadDataMissing alertBody="Payload is missing valid gas fee data." sx={{ m: 1 }} />
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<CardContent
|
|
23
|
-
sx={{
|
|
24
|
-
display: 'flex', flexDirection: 'column', rowGap: 4,
|
|
25
|
-
}}
|
|
26
|
-
{...props}
|
|
27
|
-
>
|
|
28
|
-
<Grid
|
|
29
|
-
container
|
|
30
|
-
spacing={3}
|
|
31
|
-
columns={{
|
|
32
|
-
lg: 15, md: 15, sm: 12, xs: 12,
|
|
33
|
-
}}
|
|
34
|
-
>
|
|
35
|
-
{parsedPayload
|
|
36
|
-
&& parsedPayload?.gasPrice?.map(({ price }) => (
|
|
37
|
-
<Grid
|
|
38
|
-
key={price?.label}
|
|
39
|
-
size={{
|
|
40
|
-
xs: 12, sm: 6, md: 5, lg: 3,
|
|
41
|
-
}}
|
|
42
|
-
>
|
|
43
|
-
<GasFeeCard gasPrice={price?.value} speed={price?.label} speedPaperElevation={4} />
|
|
44
|
-
</Grid>
|
|
45
|
-
))}
|
|
46
|
-
</Grid>
|
|
47
|
-
<ToggleRawPayloadBox gasPricePayload={gasPricePayload} alignItems="start" pr={1} />
|
|
48
|
-
</CardContent>
|
|
49
|
-
)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
BlocknativeGasPriceCardContent.displayName = 'BlocknativeGasPriceCardContent'
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { CardHeaderProps } from '@mui/material'
|
|
2
|
-
import type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
|
|
3
|
-
import { GasPriceWitnessCardHeader } from '@xyo-network/react-gas-price'
|
|
4
|
-
import type { PayloadRenderProps } from '@xyo-network/react-payload-plugin'
|
|
5
|
-
import React from 'react'
|
|
6
|
-
|
|
7
|
-
import { getBlocknativeTransformer } from '../hooks/index.ts'
|
|
8
|
-
import { RenderTitle } from '../lib/index.ts'
|
|
9
|
-
|
|
10
|
-
export const BlocknativeGasPriceCardHeader: React.FC<PayloadRenderProps & CardHeaderProps> = ({ payload }) => {
|
|
11
|
-
const gasPricePayload = payload ? (payload as EthereumGasBlocknativePayload) : undefined
|
|
12
|
-
const parsedPayload = getBlocknativeTransformer(gasPricePayload)
|
|
13
|
-
return <GasPriceWitnessCardHeader title={RenderTitle} parsedPayload={parsedPayload} />
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
BlocknativeGasPriceCardHeader.displayName = 'BlocknativeGasPriceCardHeader'
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import { EthereumGasBlocknativeSchema } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
|
|
3
|
-
import { sampleBlocknativeGasPricePayload } from '@xyo-network/react-storybook'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
|
|
6
|
-
import { BlocknativeGasPriceDetailsBox } from './BlocknativeGasPriceDetailsBox.tsx'
|
|
7
|
-
|
|
8
|
-
const StorybookEntry = {
|
|
9
|
-
argTypes: {},
|
|
10
|
-
component: BlocknativeGasPriceDetailsBox,
|
|
11
|
-
parameters: { docs: { page: null } },
|
|
12
|
-
title: 'plugin/blockchain/BlocknativeGasPrice/DetailsBox',
|
|
13
|
-
} as Meta<typeof BlocknativeGasPriceDetailsBox>
|
|
14
|
-
|
|
15
|
-
const Template: StoryFn<typeof BlocknativeGasPriceDetailsBox> = args => <BlocknativeGasPriceDetailsBox {...args} />
|
|
16
|
-
|
|
17
|
-
const Default = Template.bind({})
|
|
18
|
-
Default.args = {}
|
|
19
|
-
|
|
20
|
-
const WithData = Template.bind({})
|
|
21
|
-
WithData.args = { payload: sampleBlocknativeGasPricePayload }
|
|
22
|
-
|
|
23
|
-
const WithMissingData = Template.bind({})
|
|
24
|
-
WithMissingData.args = { payload: { schema: EthereumGasBlocknativeSchema } }
|
|
25
|
-
|
|
26
|
-
export {
|
|
27
|
-
Default, WithData, WithMissingData,
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export default StorybookEntry
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { Grid } from '@mui/material'
|
|
2
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
3
|
-
import { FlexCol } from '@xylabs/react-flexbox'
|
|
4
|
-
import type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
|
|
5
|
-
import {
|
|
6
|
-
GasFeeCard, GasPriceWitnessHeaderBox, ToggleRawPayloadBox,
|
|
7
|
-
} from '@xyo-network/react-gas-price'
|
|
8
|
-
import type { PayloadDetailsListRenderProps } from '@xyo-network/react-payload-plugin'
|
|
9
|
-
import { PayloadDataMissing } from '@xyo-network/react-shared'
|
|
10
|
-
import React from 'react'
|
|
11
|
-
|
|
12
|
-
import { getBlocknativeTransformer } from '../../hooks/index.ts'
|
|
13
|
-
import { RenderTitle } from '../../lib/index.ts'
|
|
14
|
-
|
|
15
|
-
const isEmpty = (obj?: object) => Object.keys(obj ?? {}).length === 0
|
|
16
|
-
|
|
17
|
-
export const BlocknativeGasPriceDetailsBox: React.FC<PayloadDetailsListRenderProps & FlexBoxProps> = ({
|
|
18
|
-
|
|
19
|
-
payload, listMode, ...props
|
|
20
|
-
}) => {
|
|
21
|
-
const gasPricePayload: EthereumGasBlocknativePayload | undefined = payload ? (payload as EthereumGasBlocknativePayload) : undefined
|
|
22
|
-
const parsedPayload = getBlocknativeTransformer(gasPricePayload)
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<>
|
|
26
|
-
{isEmpty(gasPricePayload) || !gasPricePayload?.blockPrices?.length
|
|
27
|
-
? <PayloadDataMissing alertBody="Payload is missing valid gas fee data." />
|
|
28
|
-
: (
|
|
29
|
-
<FlexCol alignItems="start" rowGap={4} {...props}>
|
|
30
|
-
<GasPriceWitnessHeaderBox heading={RenderTitle} parsedPayload={parsedPayload} />
|
|
31
|
-
<Grid
|
|
32
|
-
container
|
|
33
|
-
spacing={3}
|
|
34
|
-
columns={{
|
|
35
|
-
lg: 15, md: 15, sm: 12, xs: 12,
|
|
36
|
-
}}
|
|
37
|
-
>
|
|
38
|
-
{parsedPayload
|
|
39
|
-
&& parsedPayload?.gasPrice?.map(({ price, priorityFee }) => (
|
|
40
|
-
<Grid
|
|
41
|
-
key={price?.label}
|
|
42
|
-
size={{
|
|
43
|
-
xs: 12, sm: 6, md: 5, lg: 3,
|
|
44
|
-
}}
|
|
45
|
-
>
|
|
46
|
-
<GasFeeCard
|
|
47
|
-
key={price?.label}
|
|
48
|
-
gasPrice={price?.value}
|
|
49
|
-
speed={price?.label}
|
|
50
|
-
priorityFee={priorityFee?.value}
|
|
51
|
-
priorityFeeLabel={priorityFee?.label}
|
|
52
|
-
/>
|
|
53
|
-
</Grid>
|
|
54
|
-
))}
|
|
55
|
-
</Grid>
|
|
56
|
-
<ToggleRawPayloadBox gasPricePayload={gasPricePayload} alignItems="start" />
|
|
57
|
-
</FlexCol>
|
|
58
|
-
)}
|
|
59
|
-
</>
|
|
60
|
-
)
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
BlocknativeGasPriceDetailsBox.displayName = 'BlocknativeGasPriceDetailsBox'
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './BlocknativeGasPriceDetailsBox.tsx'
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Box/index.ts'
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import type { EthereumGasBlocknativePayload } from '@xyo-network/blocknative-ethereum-gas-payload-plugin'
|
|
2
|
-
import type { GasPriceWitnessUIBasePayload } from '@xyo-network/react-gas-price'
|
|
3
|
-
|
|
4
|
-
export const getBlocknativeTransformer = (payload?: EthereumGasBlocknativePayload): GasPriceWitnessUIBasePayload | undefined => {
|
|
5
|
-
const blockPrices = payload?.blockPrices?.[0]
|
|
6
|
-
if (blockPrices && blockPrices.estimatedPrices?.length) {
|
|
7
|
-
const estimatedPrices = blockPrices?.estimatedPrices
|
|
8
|
-
const gasPrice = estimatedPrices.map(price => ({
|
|
9
|
-
price: {
|
|
10
|
-
label: `Confidence - ${price.confidence}`,
|
|
11
|
-
value: price.price,
|
|
12
|
-
},
|
|
13
|
-
priorityFee: {
|
|
14
|
-
label: 'maxPriorityFeePerGas',
|
|
15
|
-
value: price.maxPriorityFeePerGas,
|
|
16
|
-
},
|
|
17
|
-
}))
|
|
18
|
-
|
|
19
|
-
return {
|
|
20
|
-
baseFee: {
|
|
21
|
-
label: 'baseFeePerGas',
|
|
22
|
-
value: blockPrices.baseFeePerGas,
|
|
23
|
-
},
|
|
24
|
-
blockNumber: {
|
|
25
|
-
label: 'blockNumber',
|
|
26
|
-
value: blockPrices.blockNumber,
|
|
27
|
-
},
|
|
28
|
-
gasPrice,
|
|
29
|
-
timestamp: payload.timestamp,
|
|
30
|
-
website: 'https://docs.Blocknative.io/v5/api/providers/provider/#Provider-getFeeData',
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './getBlocknativeTransformer.tsx'
|
package/src/components/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const RenderTitle = 'Blocknative Gas Tracker'
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './constants.ts'
|
package/src/index.ts
DELETED