@xyo-network/react-gas-price 7.5.7 → 7.5.11
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/components/layout/Header.d.ts +3 -1
- package/dist/browser/components/layout/Header.d.ts.map +1 -1
- package/dist/browser/components/layout/StyledCardHeader.d.ts +3 -1
- package/dist/browser/components/layout/StyledCardHeader.d.ts.map +1 -1
- package/dist/browser/index.mjs +174 -180
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +86 -25
- package/src/components/Avatar/EthereumGasPriceAvatar.stories.tsx +0 -16
- package/src/components/Avatar/EthereumGasPriceAvatar.tsx +0 -12
- package/src/components/Avatar/index.ts +0 -1
- package/src/components/CardHeader/CardHeader.tsx +0 -31
- package/src/components/CardHeader/index.ts +0 -1
- package/src/components/GasFees/Card.stories.tsx +0 -46
- package/src/components/GasFees/Card.tsx +0 -46
- package/src/components/GasFees/components/GasPriceBox.tsx +0 -23
- package/src/components/GasFees/components/GweiLabelTypography.tsx +0 -9
- package/src/components/GasFees/components/PriorityFeeBox.tsx +0 -33
- package/src/components/GasFees/components/SpeedBox.tsx +0 -23
- package/src/components/GasFees/components/index.ts +0 -3
- package/src/components/GasFees/index.ts +0 -1
- package/src/components/HeaderBox.tsx +0 -28
- package/src/components/HeaderComponents/Actions.stories.tsx +0 -25
- package/src/components/HeaderComponents/Actions.tsx +0 -35
- package/src/components/HeaderComponents/Header/Header.tsx +0 -25
- package/src/components/HeaderComponents/Header/Heading.tsx +0 -26
- package/src/components/HeaderComponents/Header/index.ts +0 -2
- package/src/components/HeaderComponents/index.ts +0 -2
- package/src/components/RawPayload/ToggleRawPayloadBox.stories.tsx +0 -24
- package/src/components/RawPayload/ToggleRawPayloadBox.tsx +0 -33
- package/src/components/RawPayload/index.ts +0 -1
- package/src/components/index.ts +0 -7
- package/src/components/layout/Header.tsx +0 -12
- package/src/components/layout/StyledCardHeader.tsx +0 -6
- package/src/components/layout/index.ts +0 -2
- package/src/global.d.ts +0 -1
- package/src/index.ts +0 -2
- package/src/types/GasPriceWitnessPayload.ts +0 -20
- package/src/types/index.ts +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-gas-price",
|
|
3
|
-
"version": "7.5.
|
|
3
|
+
"version": "7.5.11",
|
|
4
4
|
"description": "Common React library for all XYO projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"xyo",
|
|
@@ -36,43 +36,104 @@
|
|
|
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/react-card": "7.5.
|
|
48
|
-
"@xyo-network/react-shared": "7.5.7"
|
|
44
|
+
"@xyo-network/react-shared": "~7.5.11",
|
|
45
|
+
"@xyo-network/react-card": "~7.5.11"
|
|
49
46
|
},
|
|
50
47
|
"devDependencies": {
|
|
51
|
-
"@
|
|
52
|
-
"@mui/material": "
|
|
53
|
-
"@
|
|
48
|
+
"@bitauth/libauth": "~3.0.0",
|
|
49
|
+
"@mui/icons-material": "^7.3.10",
|
|
50
|
+
"@mui/material": "^7.3.10",
|
|
51
|
+
"@opentelemetry/api": "^1.9.1",
|
|
52
|
+
"@opentelemetry/sdk-trace-base": "^2.7.0",
|
|
53
|
+
"@scure/base": "~2.2.0",
|
|
54
|
+
"@storybook/react-vite": "~10.3.5",
|
|
55
|
+
"@types/node": "~25.6.0",
|
|
54
56
|
"@types/react": "^19.2.14",
|
|
55
|
-
"@xylabs/
|
|
56
|
-
"@xylabs/
|
|
57
|
-
"@xylabs/
|
|
58
|
-
"@xylabs/
|
|
59
|
-
"@xylabs/
|
|
60
|
-
"react": "
|
|
61
|
-
"react-
|
|
62
|
-
"
|
|
57
|
+
"@xylabs/react-async-effect": "~7.1.20",
|
|
58
|
+
"@xylabs/react-button": "~7.1.20",
|
|
59
|
+
"@xylabs/react-flexbox": "~7.1.20",
|
|
60
|
+
"@xylabs/react-hooks": "~7.1.20",
|
|
61
|
+
"@xylabs/react-link": "~7.1.20",
|
|
62
|
+
"@xylabs/react-promise": "~7.1.20",
|
|
63
|
+
"@xylabs/react-shared": "~7.1.20",
|
|
64
|
+
"@xylabs/react-theme": "~7.1.20",
|
|
65
|
+
"@xylabs/sdk-js": "^5.0.100",
|
|
66
|
+
"@xylabs/threads": "~5.0.100",
|
|
67
|
+
"@xylabs/toolchain": "~7.11.9",
|
|
68
|
+
"@xylabs/tsconfig": "^7.11.9",
|
|
69
|
+
"@xylabs/tsconfig-dom": "^7.11.9",
|
|
70
|
+
"@xylabs/tsconfig-react": "~7.11.9",
|
|
71
|
+
"@xylabs/zod": "~5.0.100",
|
|
72
|
+
"@xyo-network/boundwitness-model": "^5.5.1",
|
|
73
|
+
"@xyo-network/boundwitness-validator": "^5.5.1",
|
|
74
|
+
"@xyo-network/payload-builder": "^5.5.1",
|
|
75
|
+
"@xyo-network/payload-model": "^5.5.1",
|
|
76
|
+
"async-mutex": "^0.5.0",
|
|
77
|
+
"axios": "^1.15.2",
|
|
78
|
+
"bn.js": "^5.2.3",
|
|
79
|
+
"bowser": "^2.14.1",
|
|
80
|
+
"buffer": "^6.0.3",
|
|
81
|
+
"chalk": "^5.6.2",
|
|
82
|
+
"debug": "~4.4.3",
|
|
83
|
+
"esbuild": "~0.28.0",
|
|
84
|
+
"eslint": "^10.2.1",
|
|
85
|
+
"ethers": "^6.16.0",
|
|
86
|
+
"fast-deep-equal": "~3.1.3",
|
|
87
|
+
"hash-wasm": "~4.12.0",
|
|
88
|
+
"js-cookie": "~3.0.5",
|
|
89
|
+
"observable-fns": "~0.6.1",
|
|
90
|
+
"pako": "^2.1.0",
|
|
91
|
+
"react": "^19.2.5",
|
|
92
|
+
"react-dom": "^19.2.5",
|
|
93
|
+
"react-router-dom": "^7.14.2",
|
|
94
|
+
"spark-md5": "~3.0.2",
|
|
95
|
+
"storybook": "^10.3.5",
|
|
63
96
|
"typescript": "^5.9.3",
|
|
64
|
-
"vite": "
|
|
97
|
+
"vite": "^8.0.10",
|
|
98
|
+
"wasm-feature-detect": "~1.8.0",
|
|
65
99
|
"zod": "^4.3.6"
|
|
66
100
|
},
|
|
67
101
|
"peerDependencies": {
|
|
68
|
-
"@mui/icons-material": "
|
|
69
|
-
"@mui/material": "
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
102
|
+
"@mui/icons-material": "^7.3.10",
|
|
103
|
+
"@mui/material": "^7.3.10",
|
|
104
|
+
"@opentelemetry/sdk-trace-base": "^2.7.0",
|
|
105
|
+
"@scure/base": "~2.2.0",
|
|
106
|
+
"@xylabs/react-async-effect": "~7.1.20",
|
|
107
|
+
"@xylabs/react-button": "~7.1.20",
|
|
108
|
+
"@xylabs/react-flexbox": "~7.1.20",
|
|
109
|
+
"@xylabs/react-hooks": "~7.1.20",
|
|
110
|
+
"@xylabs/react-link": "~7.1.20",
|
|
111
|
+
"@xylabs/react-promise": "~7.1.20",
|
|
112
|
+
"@xylabs/react-shared": "~7.1.20",
|
|
113
|
+
"@xylabs/react-theme": "~7.1.20",
|
|
114
|
+
"@xylabs/sdk-js": "^5.0.100",
|
|
115
|
+
"@xylabs/zod": "~5.0.100",
|
|
116
|
+
"@xyo-network/boundwitness-model": "^5.5.1",
|
|
117
|
+
"@xyo-network/boundwitness-validator": "^5.5.1",
|
|
118
|
+
"@xyo-network/payload-builder": "^5.5.1",
|
|
119
|
+
"@xyo-network/payload-model": "^5.5.1",
|
|
120
|
+
"async-mutex": "^0.5.0",
|
|
121
|
+
"bn.js": "^5.2.3",
|
|
122
|
+
"bowser": "^2.14.1",
|
|
123
|
+
"buffer": "^6.0.3",
|
|
124
|
+
"chalk": "^5.6.2",
|
|
125
|
+
"ethers": "^6.16.0",
|
|
126
|
+
"fast-deep-equal": "~3.1.3",
|
|
127
|
+
"js-cookie": "~3.0.5",
|
|
128
|
+
"pako": "^2.1.0",
|
|
129
|
+
"react": "^19.2.5",
|
|
130
|
+
"react-dom": "^19.2.5",
|
|
131
|
+
"react-router-dom": "^7.14.2",
|
|
132
|
+
"spark-md5": "~3.0.2",
|
|
133
|
+
"zod": "^4.3.6"
|
|
73
134
|
},
|
|
74
135
|
"publishConfig": {
|
|
75
136
|
"access": "public"
|
|
76
137
|
},
|
|
77
138
|
"docs": "dist/docs.json"
|
|
78
|
-
}
|
|
139
|
+
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import { EthereumGasPriceAvatar } from './EthereumGasPriceAvatar.tsx'
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
component: EthereumGasPriceAvatar,
|
|
8
|
-
title: 'plugin/blockchain/EthereumGasPrice/Avatar',
|
|
9
|
-
} as Meta
|
|
10
|
-
|
|
11
|
-
const Template: StoryFn<typeof EthereumGasPriceAvatar> = props => <EthereumGasPriceAvatar {...props} />
|
|
12
|
-
|
|
13
|
-
const Default = Template.bind({})
|
|
14
|
-
Default.args = {}
|
|
15
|
-
|
|
16
|
-
export { Default }
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'
|
|
2
|
-
import type { AvatarProps } from '@mui/material'
|
|
3
|
-
import { Avatar } from '@mui/material'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
|
|
6
|
-
export const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {
|
|
7
|
-
return (
|
|
8
|
-
<Avatar {...props}>
|
|
9
|
-
<LocalGasStationRoundedIcon />
|
|
10
|
-
</Avatar>
|
|
11
|
-
)
|
|
12
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './EthereumGasPriceAvatar.tsx'
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import type { CardProps } from '@mui/material'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import type { GasPriceWitnessUIBasePayload } from '../../types/index.ts'
|
|
5
|
-
import { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents/index.ts'
|
|
6
|
-
import { StyledCardHeader } from '../layout/index.ts'
|
|
7
|
-
|
|
8
|
-
export interface GasPriceCardHeaderProps extends CardProps {
|
|
9
|
-
parsedPayload?: GasPriceWitnessUIBasePayload
|
|
10
|
-
title?: string
|
|
11
|
-
}
|
|
12
|
-
export const GasPriceWitnessCardHeader = ({
|
|
13
|
-
ref, title, parsedPayload, ...props
|
|
14
|
-
}: GasPriceCardHeaderProps) => (
|
|
15
|
-
<StyledCardHeader
|
|
16
|
-
title={<GasPriceHeaderTypography heading={title} />}
|
|
17
|
-
action={(
|
|
18
|
-
<GasPriceHeaderActionsBox
|
|
19
|
-
timestamp={parsedPayload?.timestamp}
|
|
20
|
-
baseFee={parsedPayload?.baseFee?.value}
|
|
21
|
-
baseFeeLabel={parsedPayload?.baseFee?.label}
|
|
22
|
-
blockNumber={parsedPayload?.blockNumber?.value}
|
|
23
|
-
blockNumberLabel={parsedPayload?.blockNumber?.label}
|
|
24
|
-
/>
|
|
25
|
-
)}
|
|
26
|
-
ref={ref}
|
|
27
|
-
{...props}
|
|
28
|
-
/>
|
|
29
|
-
)
|
|
30
|
-
|
|
31
|
-
GasPriceWitnessCardHeader.displayName = 'GasPriceWitnessCardHeader'
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './CardHeader.tsx'
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import { FlexCol } from '@xylabs/react-flexbox'
|
|
3
|
-
import React from 'react'
|
|
4
|
-
|
|
5
|
-
import { GasFeeCard } from './Card.tsx'
|
|
6
|
-
|
|
7
|
-
const DefaultArgs = {
|
|
8
|
-
gasPrice: 15.760_184_184_000_002,
|
|
9
|
-
priorityFee: 1.0625,
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export default {
|
|
13
|
-
component: GasFeeCard,
|
|
14
|
-
title: 'plugin/blockchain/GasPrice/GasFeeCard',
|
|
15
|
-
} as Meta
|
|
16
|
-
|
|
17
|
-
const Template: StoryFn<typeof GasFeeCard> = (props) => {
|
|
18
|
-
return <GasFeeCard {...props} />
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const Default = Template.bind({})
|
|
22
|
-
Default.args = {}
|
|
23
|
-
|
|
24
|
-
const Contained = Template.bind({})
|
|
25
|
-
Contained.args = DefaultArgs
|
|
26
|
-
Contained.decorators = [
|
|
27
|
-
(Story, args) => (
|
|
28
|
-
<FlexCol alignItems="start">
|
|
29
|
-
<Story {...args} />
|
|
30
|
-
</FlexCol>
|
|
31
|
-
),
|
|
32
|
-
]
|
|
33
|
-
|
|
34
|
-
const WithData = Template.bind({})
|
|
35
|
-
WithData.args = DefaultArgs
|
|
36
|
-
|
|
37
|
-
const WithLabel = Template.bind({})
|
|
38
|
-
WithLabel.args = {
|
|
39
|
-
...DefaultArgs,
|
|
40
|
-
priorityFeeLabel: 'CustomPriorityFeeLabel',
|
|
41
|
-
speed: 'CustomSpeedLabel',
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
export {
|
|
45
|
-
Contained, Default, WithData, WithLabel,
|
|
46
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import type { CardProps } from '@mui/material'
|
|
2
|
-
import {
|
|
3
|
-
Card, Paper, useTheme,
|
|
4
|
-
} from '@mui/material'
|
|
5
|
-
import { FlexGrowCol } from '@xylabs/react-flexbox'
|
|
6
|
-
import { CardContentEx } from '@xyo-network/react-card'
|
|
7
|
-
import React from 'react'
|
|
8
|
-
|
|
9
|
-
import {
|
|
10
|
-
GasPriceBox, PriorityFeeBox, SpeedBox,
|
|
11
|
-
} from './components/index.ts'
|
|
12
|
-
|
|
13
|
-
export interface GasFeeCardProps extends CardProps {
|
|
14
|
-
gasPrice?: number
|
|
15
|
-
priorityFee?: number
|
|
16
|
-
priorityFeeLabel?: string
|
|
17
|
-
speed?: string
|
|
18
|
-
speedPaperElevation?: number
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export const GasFeeCard: React.FC<GasFeeCardProps> = ({
|
|
22
|
-
gasPrice, speedPaperElevation, priorityFee, priorityFeeLabel, speed = 'low', ...props
|
|
23
|
-
}) => {
|
|
24
|
-
const theme = useTheme()
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<Card sx={{ p: 0 }} {...props}>
|
|
28
|
-
<CardContentEx
|
|
29
|
-
removePadding
|
|
30
|
-
sx={{
|
|
31
|
-
flexDirection: 'column', flexGrow: 1, p: 0, rowGap: 2,
|
|
32
|
-
}}
|
|
33
|
-
>
|
|
34
|
-
<FlexGrowCol bgcolor={theme.vars.palette.secondary.dark} alignItems="start" p={2} rowGap={1.5} color={theme.vars.palette.common.white}>
|
|
35
|
-
<GasPriceBox gasPrice={gasPrice} />
|
|
36
|
-
{priorityFee
|
|
37
|
-
? <PriorityFeeBox priorityFee={priorityFee} priorityFeeLabel={priorityFeeLabel} />
|
|
38
|
-
: null}
|
|
39
|
-
</FlexGrowCol>
|
|
40
|
-
<Paper elevation={speedPaperElevation} sx={{ borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }}>
|
|
41
|
-
<SpeedBox speed={speed} />
|
|
42
|
-
</Paper>
|
|
43
|
-
</CardContentEx>
|
|
44
|
-
</Card>
|
|
45
|
-
)
|
|
46
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { useTheme } from '@mui/material'
|
|
2
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
3
|
-
import { FlexRow } from '@xylabs/react-flexbox'
|
|
4
|
-
import { TypographyEx } from '@xyo-network/react-shared'
|
|
5
|
-
import React from 'react'
|
|
6
|
-
|
|
7
|
-
import { GweiLabelTypography } from './GweiLabelTypography.tsx'
|
|
8
|
-
|
|
9
|
-
export interface GasPriceBoxProps extends FlexBoxProps {
|
|
10
|
-
gasPrice?: number
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const GasPriceBox: React.FC<GasPriceBoxProps> = ({ gasPrice, ...props }) => {
|
|
14
|
-
const theme = useTheme()
|
|
15
|
-
return (
|
|
16
|
-
<FlexRow columnGap={1.5} rowGap={1.5} alignItems="end" {...props}>
|
|
17
|
-
<TypographyEx lineHeight={1} fontWeight="200" fontSize={theme.spacing(6)} title={gasPrice?.toString() ?? ''}>
|
|
18
|
-
{gasPrice?.toFixed(2)}
|
|
19
|
-
</TypographyEx>
|
|
20
|
-
<GweiLabelTypography fontSize={theme.spacing(2)} />
|
|
21
|
-
</FlexRow>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { TypographyExProps } from '@xyo-network/react-shared'
|
|
2
|
-
import { TypographyEx } from '@xyo-network/react-shared'
|
|
3
|
-
import React from 'react'
|
|
4
|
-
|
|
5
|
-
export const GweiLabelTypography: React.FC<TypographyExProps> = props => (
|
|
6
|
-
<TypographyEx variant="caption" {...props}>
|
|
7
|
-
GWEI
|
|
8
|
-
</TypographyEx>
|
|
9
|
-
)
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'
|
|
2
|
-
import { useTheme } from '@mui/material'
|
|
3
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
4
|
-
import { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
|
|
5
|
-
import { TypographyEx } from '@xyo-network/react-shared'
|
|
6
|
-
import React from 'react'
|
|
7
|
-
|
|
8
|
-
import { GweiLabelTypography } from './GweiLabelTypography.tsx'
|
|
9
|
-
|
|
10
|
-
export interface PriorityFeeBoxProps extends FlexBoxProps {
|
|
11
|
-
priorityFee?: number
|
|
12
|
-
priorityFeeLabel?: string
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({
|
|
16
|
-
priorityFee, priorityFeeLabel = 'Priority Fee', ...props
|
|
17
|
-
}) => {
|
|
18
|
-
const theme = useTheme()
|
|
19
|
-
|
|
20
|
-
return (
|
|
21
|
-
<FlexGrowRow width="100%" justifyContent="space-between" alignItems="end" {...props}>
|
|
22
|
-
<FlexCol alignItems="start">
|
|
23
|
-
<TypographyEx>{priorityFeeLabel}</TypographyEx>
|
|
24
|
-
<TypographyEx title={priorityFee?.toString() ?? ''}>
|
|
25
|
-
{priorityFee?.toFixed(2)}
|
|
26
|
-
{' '}
|
|
27
|
-
<GweiLabelTypography fontSize={theme.spacing(1)} />
|
|
28
|
-
</TypographyEx>
|
|
29
|
-
</FlexCol>
|
|
30
|
-
<LocalGasStationRoundedIcon />
|
|
31
|
-
</FlexGrowRow>
|
|
32
|
-
)
|
|
33
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { useTheme } from '@mui/material'
|
|
2
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
3
|
-
import { FlexGrowCol } from '@xylabs/react-flexbox'
|
|
4
|
-
import { TypographyEx } from '@xyo-network/react-shared'
|
|
5
|
-
import React from 'react'
|
|
6
|
-
|
|
7
|
-
export interface SpeedBoxProps extends FlexBoxProps {
|
|
8
|
-
speed?: string
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const SpeedBox: React.FC<SpeedBoxProps> = ({ speed, ...props }) => {
|
|
12
|
-
const theme = useTheme()
|
|
13
|
-
|
|
14
|
-
return speed
|
|
15
|
-
? (
|
|
16
|
-
<FlexGrowCol {...props}>
|
|
17
|
-
<TypographyEx fontSize={theme.spacing(3)} fontWeight="200" p={1}>
|
|
18
|
-
{speed}
|
|
19
|
-
</TypographyEx>
|
|
20
|
-
</FlexGrowCol>
|
|
21
|
-
)
|
|
22
|
-
: null
|
|
23
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Card.tsx'
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import type { GasPriceWitnessUIBasePayload } from '../types/index.ts'
|
|
5
|
-
import { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from './HeaderComponents/index.ts'
|
|
6
|
-
import { StyledGasPriceHeaderBox } from './layout/index.ts'
|
|
7
|
-
|
|
8
|
-
export interface GasPriceWitnessHeaderBoxProps extends FlexBoxProps {
|
|
9
|
-
heading?: string
|
|
10
|
-
parsedPayload?: GasPriceWitnessUIBasePayload
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const GasPriceWitnessHeaderBox: React.FC<GasPriceWitnessHeaderBoxProps> = ({
|
|
14
|
-
heading, parsedPayload, ...props
|
|
15
|
-
}) => {
|
|
16
|
-
return (
|
|
17
|
-
<StyledGasPriceHeaderBox {...props}>
|
|
18
|
-
<GasPriceHeaderTypography heading={heading} />
|
|
19
|
-
<GasPriceHeaderActionsBox
|
|
20
|
-
timestamp={parsedPayload?.timestamp}
|
|
21
|
-
baseFee={parsedPayload?.baseFee?.value}
|
|
22
|
-
baseFeeLabel={parsedPayload?.baseFee?.label}
|
|
23
|
-
blockNumber={parsedPayload?.blockNumber?.value}
|
|
24
|
-
blockNumberLabel={parsedPayload?.blockNumber?.label}
|
|
25
|
-
/>
|
|
26
|
-
</StyledGasPriceHeaderBox>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import { GasPriceHeaderActionsBox } from './Actions.tsx'
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
component: GasPriceHeaderActionsBox,
|
|
8
|
-
title: 'plugin/blockchain/GasPrice/GasPriceHeaderActionsBox',
|
|
9
|
-
} as Meta
|
|
10
|
-
|
|
11
|
-
const Template: StoryFn<typeof GasPriceHeaderActionsBox> = props => <GasPriceHeaderActionsBox {...props} />
|
|
12
|
-
|
|
13
|
-
const Default = Template.bind({})
|
|
14
|
-
Default.args = {}
|
|
15
|
-
|
|
16
|
-
const WithData = Template.bind({})
|
|
17
|
-
WithData.args = {
|
|
18
|
-
baseFee: 12,
|
|
19
|
-
baseFeeLabel: 'Custom BaseFee Label',
|
|
20
|
-
blockNumber: 123_465,
|
|
21
|
-
blockNumberLabel: 'Custom BlockNumber Label',
|
|
22
|
-
timestamp: 1_670_530_947,
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export { Default, WithData }
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { Chip } from '@mui/material'
|
|
2
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
3
|
-
import { FlexRow } from '@xylabs/react-flexbox'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
|
|
6
|
-
export interface GasPriceEstimateActionsBoxProps extends FlexBoxProps {
|
|
7
|
-
baseFee?: number
|
|
8
|
-
baseFeeLabel?: string
|
|
9
|
-
blockNumber?: number
|
|
10
|
-
blockNumberLabel?: string
|
|
11
|
-
timestamp?: number
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export const GasPriceHeaderActionsBox: React.FC<GasPriceEstimateActionsBoxProps> = ({
|
|
15
|
-
baseFee,
|
|
16
|
-
baseFeeLabel = 'Base Fee',
|
|
17
|
-
blockNumber,
|
|
18
|
-
blockNumberLabel = 'Block Number',
|
|
19
|
-
timestamp,
|
|
20
|
-
...props
|
|
21
|
-
}) => {
|
|
22
|
-
return (
|
|
23
|
-
<FlexRow columnGap={1} rowGap={1} flexWrap="wrap" {...props}>
|
|
24
|
-
{timestamp
|
|
25
|
-
? <Chip label={new Date(timestamp).toLocaleString()} />
|
|
26
|
-
: null}
|
|
27
|
-
{baseFee
|
|
28
|
-
? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} />
|
|
29
|
-
: null}
|
|
30
|
-
{blockNumber
|
|
31
|
-
? <Chip label={`${blockNumberLabel} - ${blockNumber}`} />
|
|
32
|
-
: null}
|
|
33
|
-
</FlexRow>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { useTheme } from '@mui/material'
|
|
2
|
-
import type { TypographyExProps } from '@xyo-network/react-shared'
|
|
3
|
-
import { getTokenData } from '@xyo-network/react-shared'
|
|
4
|
-
import type { PropsWithChildren } from 'react'
|
|
5
|
-
import React from 'react'
|
|
6
|
-
|
|
7
|
-
import { GasPriceHeadingTypography } from './Heading.tsx'
|
|
8
|
-
|
|
9
|
-
export interface GasPriceHeaderTypographyProps extends TypographyExProps, PropsWithChildren {
|
|
10
|
-
heading?: string
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({
|
|
14
|
-
heading, children, ...props
|
|
15
|
-
}) => {
|
|
16
|
-
const theme = useTheme()
|
|
17
|
-
const [ethData] = getTokenData(['eth'])
|
|
18
|
-
const networkIcon = <img height={theme.spacing(4)} src={ethData.icon} />
|
|
19
|
-
|
|
20
|
-
return (
|
|
21
|
-
<GasPriceHeadingTypography heading={heading} networkIcon={networkIcon} {...props}>
|
|
22
|
-
{children}
|
|
23
|
-
</GasPriceHeadingTypography>
|
|
24
|
-
)
|
|
25
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { useTheme } from '@mui/material'
|
|
2
|
-
import type { TypographyExProps } from '@xyo-network/react-shared'
|
|
3
|
-
import { TypographyEx } from '@xyo-network/react-shared'
|
|
4
|
-
import type { ReactNode } from 'react'
|
|
5
|
-
import React from 'react'
|
|
6
|
-
|
|
7
|
-
export interface GasPriceHeadingTypographyProps extends TypographyExProps {
|
|
8
|
-
children?: ReactNode
|
|
9
|
-
heading?: string
|
|
10
|
-
networkIcon?: ReactNode
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const GasPriceHeadingTypography: React.FC<GasPriceHeadingTypographyProps> = ({
|
|
14
|
-
children, heading, networkIcon, ...props
|
|
15
|
-
}) => {
|
|
16
|
-
const theme = useTheme()
|
|
17
|
-
return (
|
|
18
|
-
<TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>
|
|
19
|
-
{heading}
|
|
20
|
-
{' '}
|
|
21
|
-
{networkIcon}
|
|
22
|
-
{' '}
|
|
23
|
-
{children}
|
|
24
|
-
</TypographyEx>
|
|
25
|
-
)
|
|
26
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import { ToggleRawPayloadBox } from './ToggleRawPayloadBox.tsx'
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
component: ToggleRawPayloadBox,
|
|
8
|
-
title: 'plugin/blockchain/GasPrice/ToggleRawPayloadBox',
|
|
9
|
-
} as Meta
|
|
10
|
-
|
|
11
|
-
const Template: StoryFn<typeof ToggleRawPayloadBox> = props => <ToggleRawPayloadBox {...props} />
|
|
12
|
-
|
|
13
|
-
const Default = Template.bind({})
|
|
14
|
-
Default.args = {}
|
|
15
|
-
|
|
16
|
-
const WithData = Template.bind({})
|
|
17
|
-
WithData.args = {
|
|
18
|
-
gasPricePayload: {
|
|
19
|
-
foo: 'bar',
|
|
20
|
-
schema: 'network.xyo.some.schema',
|
|
21
|
-
},
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export { Default, WithData }
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Button, Collapse, Paper,
|
|
3
|
-
} from '@mui/material'
|
|
4
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
5
|
-
import { FlexCol } from '@xylabs/react-flexbox'
|
|
6
|
-
import React, { useState } from 'react'
|
|
7
|
-
|
|
8
|
-
export interface ToggleRawPayloadBoxProps extends FlexBoxProps {
|
|
9
|
-
gasPricePayload?: object
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export const ToggleRawPayloadBox: React.FC<ToggleRawPayloadBoxProps> = ({ gasPricePayload, ...props }) => {
|
|
13
|
-
const [collapse, setCollapse] = useState(false)
|
|
14
|
-
return gasPricePayload
|
|
15
|
-
? (
|
|
16
|
-
<FlexCol rowGap={1} {...props}>
|
|
17
|
-
<Button
|
|
18
|
-
color="secondary"
|
|
19
|
-
sx={{ bgcolor: 'secondary.dark', color: 'white' }}
|
|
20
|
-
variant="contained"
|
|
21
|
-
onClick={() => setCollapse(!collapse)}
|
|
22
|
-
>
|
|
23
|
-
Raw Payload
|
|
24
|
-
</Button>
|
|
25
|
-
<Collapse in={collapse}>
|
|
26
|
-
<Paper elevation={4} sx={{ p: 2 }}>
|
|
27
|
-
<pre>{JSON.stringify(gasPricePayload, null, 2)}</pre>
|
|
28
|
-
</Paper>
|
|
29
|
-
</Collapse>
|
|
30
|
-
</FlexCol>
|
|
31
|
-
)
|
|
32
|
-
: null
|
|
33
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './ToggleRawPayloadBox.tsx'
|
package/src/components/index.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { styled } from '@mui/material'
|
|
2
|
-
import { FlexRow } from '@xylabs/react-flexbox'
|
|
3
|
-
|
|
4
|
-
export const StyledGasPriceHeaderBox = styled(FlexRow, { name: 'StyledGasPriceEstimateBox' })(({ theme }) => ({
|
|
5
|
-
alignItems: 'end',
|
|
6
|
-
columnGap: theme.spacing(2),
|
|
7
|
-
flexWrap: 'wrap',
|
|
8
|
-
justifyContent: 'space-between',
|
|
9
|
-
justifyItems: 'space-between',
|
|
10
|
-
rowGap: theme.spacing(2),
|
|
11
|
-
width: '100%',
|
|
12
|
-
}))
|
package/src/global.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@mui/material/themeCssVarsAugmentation'
|
package/src/index.ts
DELETED