@xyo-network/react-gas-price 2.64.0 → 2.64.3
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/Avatar/EthereumGasPriceAvatar.js +3 -2
- package/dist/browser/components/Avatar/EthereumGasPriceAvatar.js.map +1 -1
- package/dist/browser/components/Avatar/index.js +10 -1
- package/dist/browser/components/Avatar/index.js.map +1 -1
- package/dist/browser/components/CardHeader/CardHeader.js +61 -6
- package/dist/browser/components/CardHeader/CardHeader.js.map +1 -1
- package/dist/browser/components/CardHeader/index.js +81 -1
- package/dist/browser/components/CardHeader/index.js.map +1 -1
- package/dist/browser/components/GasFees/Card.js +63 -10
- package/dist/browser/components/GasFees/Card.js.map +1 -1
- package/dist/browser/components/GasFees/components/GasPriceBox.js +12 -5
- package/dist/browser/components/GasFees/components/GasPriceBox.js.map +1 -1
- package/dist/browser/components/GasFees/components/GweiLabelTypography.js +3 -2
- package/dist/browser/components/GasFees/components/GweiLabelTypography.js.map +1 -1
- package/dist/browser/components/GasFees/components/PriorityFeeBox.js +14 -7
- package/dist/browser/components/GasFees/components/PriorityFeeBox.js.map +1 -1
- package/dist/browser/components/GasFees/components/SpeedBox.js +3 -2
- package/dist/browser/components/GasFees/components/SpeedBox.js.map +1 -1
- package/dist/browser/components/GasFees/components/index.js +55 -3
- package/dist/browser/components/GasFees/components/index.js.map +1 -1
- package/dist/browser/components/GasFees/index.js +71 -1
- package/dist/browser/components/GasFees/index.js.map +1 -1
- package/dist/browser/components/HeaderBox.js +65 -6
- package/dist/browser/components/HeaderBox.js.map +1 -1
- package/dist/browser/components/HeaderComponents/Actions.js +3 -2
- package/dist/browser/components/HeaderComponents/Actions.js.map +1 -1
- package/dist/browser/components/HeaderComponents/Header/Header.js +21 -4
- package/dist/browser/components/HeaderComponents/Header/Header.js.map +1 -1
- package/dist/browser/components/HeaderComponents/Header/Heading.js +3 -2
- package/dist/browser/components/HeaderComponents/Header/Heading.js.map +1 -1
- package/dist/browser/components/HeaderComponents/Header/index.js +31 -2
- package/dist/browser/components/HeaderComponents/Header/index.js.map +1 -1
- package/dist/browser/components/HeaderComponents/index.js +51 -2
- package/dist/browser/components/HeaderComponents/index.js.map +1 -1
- package/dist/browser/components/RawPayload/ToggleRawPayloadBox.js +3 -2
- package/dist/browser/components/RawPayload/ToggleRawPayloadBox.js.map +1 -1
- package/dist/browser/components/RawPayload/index.js +15 -1
- package/dist/browser/components/RawPayload/index.js.map +1 -1
- package/dist/browser/components/index.js +211 -7
- package/dist/browser/components/index.js.map +1 -1
- package/dist/browser/components/layout/Header.js +2 -1
- package/dist/browser/components/layout/Header.js.map +1 -1
- package/dist/browser/components/layout/StyledCardHeader.js +2 -1
- package/dist/browser/components/layout/StyledCardHeader.js.map +1 -1
- package/dist/browser/components/layout/index.js +23 -2
- package/dist/browser/components/layout/index.js.map +1 -1
- package/dist/browser/index.js +211 -2
- package/dist/browser/index.js.map +1 -1
- package/dist/browser/types/index.js +0 -1
- package/dist/browser/types/index.js.map +1 -1
- package/dist/docs.json +49 -49
- package/package.json +7 -7
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/Avatar/EthereumGasPriceAvatar.tsx
|
|
2
2
|
import { LocalGasStationRounded as LocalGasStationRoundedIcon } from "@mui/icons-material";
|
|
3
3
|
import { Avatar } from "@mui/material";
|
|
4
|
-
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var EthereumGasPriceAvatar = ({ ...props }) => {
|
|
5
6
|
return /* @__PURE__ */ jsx(Avatar, { ...props, children: /* @__PURE__ */ jsx(LocalGasStationRoundedIcon, {}) });
|
|
6
7
|
};
|
|
7
8
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Avatar/EthereumGasPriceAvatar.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { Avatar, AvatarProps } from '@mui/material'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n return (\n <Avatar {...props}>\n <LocalGasStationRoundedIcon />\n </Avatar>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Avatar/EthereumGasPriceAvatar.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { Avatar, AvatarProps } from '@mui/material'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n return (\n <Avatar {...props}>\n <LocalGasStationRoundedIcon />\n </Avatar>\n )\n}\n"],"mappings":";AAAA,SAAS,0BAA0B,kCAAkC;AACrE,SAAS,cAA2B;AAK9B;AAHC,IAAM,yBAAgD,CAAC,EAAE,GAAG,MAAM,MAAM;AAC7E,SACE,oBAAC,UAAQ,GAAG,OACV,8BAAC,8BAA2B,GAC9B;AAEJ;","names":[]}
|
|
@@ -1,2 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/Avatar/EthereumGasPriceAvatar.tsx
|
|
2
|
+
import { LocalGasStationRounded as LocalGasStationRoundedIcon } from "@mui/icons-material";
|
|
3
|
+
import { Avatar } from "@mui/material";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var EthereumGasPriceAvatar = ({ ...props }) => {
|
|
6
|
+
return /* @__PURE__ */ jsx(Avatar, { ...props, children: /* @__PURE__ */ jsx(LocalGasStationRoundedIcon, {}) });
|
|
7
|
+
};
|
|
8
|
+
export {
|
|
9
|
+
EthereumGasPriceAvatar
|
|
10
|
+
};
|
|
2
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Avatar/
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Avatar/EthereumGasPriceAvatar.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { Avatar, AvatarProps } from '@mui/material'\n\nexport const EthereumGasPriceAvatar: React.FC<AvatarProps> = ({ ...props }) => {\n return (\n <Avatar {...props}>\n <LocalGasStationRoundedIcon />\n </Avatar>\n )\n}\n"],"mappings":";AAAA,SAAS,0BAA0B,kCAAkC;AACrE,SAAS,cAA2B;AAK9B;AAHC,IAAM,yBAAgD,CAAC,EAAE,GAAG,MAAM,MAAM;AAC7E,SACE,oBAAC,UAAQ,GAAG,OACV,8BAAC,8BAA2B,GAC9B;AAEJ;","names":[]}
|
|
@@ -1,12 +1,67 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/CardHeader/CardHeader.tsx
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
|
|
4
|
+
// src/components/HeaderComponents/Actions.tsx
|
|
5
|
+
import { Chip } from "@mui/material";
|
|
6
|
+
import { FlexRow } from "@xylabs/react-flexbox";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
var GasPriceHeaderActionsBox = ({
|
|
9
|
+
baseFee,
|
|
10
|
+
baseFeeLabel = "Base Fee",
|
|
11
|
+
blockNumber,
|
|
12
|
+
blockNumberLabel = "Block Number",
|
|
13
|
+
timestamp,
|
|
14
|
+
...props
|
|
15
|
+
}) => {
|
|
16
|
+
return /* @__PURE__ */ jsxs(FlexRow, { columnGap: 1, rowGap: 1, flexWrap: "wrap", ...props, children: [
|
|
17
|
+
timestamp ? /* @__PURE__ */ jsx(Chip, { label: new Date(timestamp).toLocaleString() }) : null,
|
|
18
|
+
baseFee ? /* @__PURE__ */ jsx(Chip, { label: `${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI` }) : null,
|
|
19
|
+
blockNumber ? /* @__PURE__ */ jsx(Chip, { label: `${blockNumberLabel} - ${blockNumber}` }) : null
|
|
20
|
+
] });
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
// src/components/HeaderComponents/Header/Header.tsx
|
|
24
|
+
import { useTheme as useTheme2 } from "@mui/material";
|
|
25
|
+
import { useGetTokenData } from "@xyo-network/react-shared";
|
|
26
|
+
|
|
27
|
+
// src/components/HeaderComponents/Header/Heading.tsx
|
|
28
|
+
import { useTheme } from "@mui/material";
|
|
29
|
+
import { TypographyEx } from "@xyo-network/react-shared";
|
|
30
|
+
import { jsxs as jsxs2 } from "react/jsx-runtime";
|
|
31
|
+
var GasPriceHeadingTypography = ({ children, heading, networkIcon, ...props }) => {
|
|
32
|
+
const theme = useTheme();
|
|
33
|
+
return /* @__PURE__ */ jsxs2(TypographyEx, { fontSize: theme.spacing(6), lineHeight: 1, ...props, children: [
|
|
34
|
+
heading,
|
|
35
|
+
" ",
|
|
36
|
+
networkIcon,
|
|
37
|
+
" ",
|
|
38
|
+
children
|
|
39
|
+
] });
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
// src/components/HeaderComponents/Header/Header.tsx
|
|
43
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
44
|
+
var GasPriceHeaderTypography = ({ heading, children, ...props }) => {
|
|
45
|
+
const theme = useTheme2();
|
|
46
|
+
const [ethData] = useGetTokenData(["eth"]);
|
|
47
|
+
const networkIcon = /* @__PURE__ */ jsx2("img", { height: theme.spacing(4), src: ethData.icon });
|
|
48
|
+
return /* @__PURE__ */ jsx2(GasPriceHeadingTypography, { heading, networkIcon, ...props, children });
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// src/components/layout/StyledCardHeader.tsx
|
|
52
|
+
import { CardHeader, styled } from "@mui/material";
|
|
53
|
+
var StyledCardHeader = styled(CardHeader, { name: "StyledCardHeader" })(({ theme }) => ({
|
|
54
|
+
flexWrap: "wrap",
|
|
55
|
+
rowGap: theme.spacing(2)
|
|
56
|
+
}));
|
|
57
|
+
|
|
58
|
+
// src/components/CardHeader/CardHeader.tsx
|
|
59
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
60
|
+
var GasPriceWitnessCardHeader = forwardRef(({ title, parsedPayload, ...props }, ref) => /* @__PURE__ */ jsx3(
|
|
6
61
|
StyledCardHeader,
|
|
7
62
|
{
|
|
8
|
-
title: /* @__PURE__ */
|
|
9
|
-
action: /* @__PURE__ */
|
|
63
|
+
title: /* @__PURE__ */ jsx3(GasPriceHeaderTypography, { heading: title }),
|
|
64
|
+
action: /* @__PURE__ */ jsx3(
|
|
10
65
|
GasPriceHeaderActionsBox,
|
|
11
66
|
{
|
|
12
67
|
timestamp: parsedPayload?.timestamp,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import { CardProps } from '@mui/material'\nimport { forwardRef } from 'react'\n\nimport { GasPriceWitnessUIBasePayload } from '../../types'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents'\nimport { StyledCardHeader } from '../layout'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n parsedPayload?: GasPriceWitnessUIBasePayload\n title?: string\n}\nexport const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCardHeaderProps>(({ title, parsedPayload, ...props }, ref) => (\n <StyledCardHeader\n title={<GasPriceHeaderTypography heading={title} />}\n action={\n <GasPriceHeaderActionsBox\n timestamp={parsedPayload?.timestamp}\n baseFee={parsedPayload?.baseFee?.value}\n baseFeeLabel={parsedPayload?.baseFee?.label}\n blockNumber={parsedPayload?.blockNumber?.value}\n blockNumberLabel={parsedPayload?.blockNumber?.label}\n />\n }\n ref={ref}\n {...props}\n />\n))\n\nGasPriceWitnessCardHeader.displayName = 'GasPriceWitnessCardHeader'\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CardHeader/CardHeader.tsx","../../../../src/components/HeaderComponents/Actions.tsx","../../../../src/components/HeaderComponents/Header/Header.tsx","../../../../src/components/HeaderComponents/Header/Heading.tsx","../../../../src/components/layout/StyledCardHeader.tsx"],"sourcesContent":["import { CardProps } from '@mui/material'\nimport { forwardRef } from 'react'\n\nimport { GasPriceWitnessUIBasePayload } from '../../types'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents'\nimport { StyledCardHeader } from '../layout'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n parsedPayload?: GasPriceWitnessUIBasePayload\n title?: string\n}\nexport const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCardHeaderProps>(({ title, parsedPayload, ...props }, ref) => (\n <StyledCardHeader\n title={<GasPriceHeaderTypography heading={title} />}\n action={\n <GasPriceHeaderActionsBox\n timestamp={parsedPayload?.timestamp}\n baseFee={parsedPayload?.baseFee?.value}\n baseFeeLabel={parsedPayload?.baseFee?.label}\n blockNumber={parsedPayload?.blockNumber?.value}\n blockNumberLabel={parsedPayload?.blockNumber?.label}\n />\n }\n ref={ref}\n {...props}\n />\n))\n\nGasPriceWitnessCardHeader.displayName = 'GasPriceWitnessCardHeader'\n","import { Chip } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\n\nexport interface GasPriceEstimateActionsBoxProps extends FlexBoxProps {\n baseFee?: number\n baseFeeLabel?: string\n blockNumber?: number\n blockNumberLabel?: string\n timestamp?: number\n}\n\nexport const GasPriceHeaderActionsBox: React.FC<GasPriceEstimateActionsBoxProps> = ({\n baseFee,\n baseFeeLabel = 'Base Fee',\n blockNumber,\n blockNumberLabel = 'Block Number',\n timestamp,\n ...props\n}) => {\n return (\n <FlexRow columnGap={1} rowGap={1} flexWrap=\"wrap\" {...props}>\n {timestamp ? <Chip label={new Date(timestamp).toLocaleString()} /> : null}\n {baseFee ? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} /> : null}\n {blockNumber ? <Chip label={`${blockNumberLabel} - ${blockNumber}`} /> : null}\n </FlexRow>\n )\n}\n","import { useTheme } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { TypographyExProps, useGetTokenData } from '@xyo-network/react-shared'\n\nimport { GasPriceHeadingTypography } from './Heading'\n\nexport interface GasPriceHeaderTypographyProps extends TypographyExProps, WithChildren {\n heading?: string\n}\n\nexport const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({ heading, children, ...props }) => {\n const theme = useTheme()\n const [ethData] = useGetTokenData(['eth'])\n const networkIcon = <img height={theme.spacing(4)} src={ethData.icon} />\n\n return (\n <GasPriceHeadingTypography heading={heading} networkIcon={networkIcon} {...props}>\n {children}\n </GasPriceHeadingTypography>\n )\n}\n","import { useTheme } from '@mui/material'\nimport { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\nimport { ReactNode } from 'react'\n\nexport interface GasPriceHeadingTypographyProps extends TypographyExProps {\n children?: ReactNode\n heading?: string\n networkIcon?: ReactNode\n}\n\nexport const GasPriceHeadingTypography: React.FC<GasPriceHeadingTypographyProps> = ({ children, heading, networkIcon, ...props }) => {\n const theme = useTheme()\n return (\n <TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>\n {heading} {networkIcon} {children}\n </TypographyEx>\n )\n}\n","import { CardHeader, styled } from '@mui/material'\n\nexport const StyledCardHeader = styled(CardHeader, { name: 'StyledCardHeader' })(({ theme }) => ({\n flexWrap: 'wrap',\n rowGap: theme.spacing(2),\n}))\n"],"mappings":";AACA,SAAS,kBAAkB;;;ACD3B,SAAS,YAAY;AACrB,SAAuB,eAAe;AAmBlC,SACe,KADf;AATG,IAAM,2BAAsE,CAAC;AAAA,EAClF;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,qBAAC,WAAQ,WAAW,GAAG,QAAQ,GAAG,UAAS,QAAQ,GAAG,OACnD;AAAA,gBAAY,oBAAC,QAAK,OAAO,IAAI,KAAK,SAAS,EAAE,eAAe,GAAG,IAAK;AAAA,IACpE,UAAU,oBAAC,QAAK,OAAO,GAAG,YAAY,MAAM,QAAQ,QAAQ,CAAC,CAAC,SAAS,IAAK;AAAA,IAC5E,cAAc,oBAAC,QAAK,OAAO,GAAG,gBAAgB,MAAM,WAAW,IAAI,IAAK;AAAA,KAC3E;AAEJ;;;AC1BA,SAAS,YAAAA,iBAAgB;AAEzB,SAA4B,uBAAuB;;;ACFnD,SAAS,gBAAgB;AACzB,SAAS,oBAAuC;AAY5C,iBAAAC,aAAA;AAHG,IAAM,4BAAsE,CAAC,EAAE,UAAU,SAAS,aAAa,GAAG,MAAM,MAAM;AACnI,QAAM,QAAQ,SAAS;AACvB,SACE,gBAAAA,MAAC,gBAAa,UAAU,MAAM,QAAQ,CAAC,GAAG,YAAY,GAAI,GAAG,OAC1D;AAAA;AAAA,IAAQ;AAAA,IAAE;AAAA,IAAY;AAAA,IAAE;AAAA,KAC3B;AAEJ;;;ADJsB,gBAAAC,YAAA;AAHf,IAAM,2BAAoE,CAAC,EAAE,SAAS,UAAU,GAAG,MAAM,MAAM;AACpH,QAAM,QAAQC,UAAS;AACvB,QAAM,CAAC,OAAO,IAAI,gBAAgB,CAAC,KAAK,CAAC;AACzC,QAAM,cAAc,gBAAAD,KAAC,SAAI,QAAQ,MAAM,QAAQ,CAAC,GAAG,KAAK,QAAQ,MAAM;AAEtE,SACE,gBAAAA,KAAC,6BAA0B,SAAkB,aAA2B,GAAG,OACxE,UACH;AAEJ;;;AEpBA,SAAS,YAAY,cAAc;AAE5B,IAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AACzB,EAAE;;;AJQS,gBAAAE,YAAA;AAFJ,IAAM,4BAA4B,WAAoD,CAAC,EAAE,OAAO,eAAe,GAAG,MAAM,GAAG,QAChI,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,OAAO,gBAAAA,KAAC,4BAAyB,SAAS,OAAO;AAAA,IACjD,QACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,eAAe;AAAA,QAC1B,SAAS,eAAe,SAAS;AAAA,QACjC,cAAc,eAAe,SAAS;AAAA,QACtC,aAAa,eAAe,aAAa;AAAA,QACzC,kBAAkB,eAAe,aAAa;AAAA;AAAA,IAChD;AAAA,IAEF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,0BAA0B,cAAc;","names":["useTheme","jsxs","jsx","useTheme","jsx"]}
|
|
@@ -1,2 +1,82 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/CardHeader/CardHeader.tsx
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
|
|
4
|
+
// src/components/HeaderComponents/Actions.tsx
|
|
5
|
+
import { Chip } from "@mui/material";
|
|
6
|
+
import { FlexRow } from "@xylabs/react-flexbox";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
var GasPriceHeaderActionsBox = ({
|
|
9
|
+
baseFee,
|
|
10
|
+
baseFeeLabel = "Base Fee",
|
|
11
|
+
blockNumber,
|
|
12
|
+
blockNumberLabel = "Block Number",
|
|
13
|
+
timestamp,
|
|
14
|
+
...props
|
|
15
|
+
}) => {
|
|
16
|
+
return /* @__PURE__ */ jsxs(FlexRow, { columnGap: 1, rowGap: 1, flexWrap: "wrap", ...props, children: [
|
|
17
|
+
timestamp ? /* @__PURE__ */ jsx(Chip, { label: new Date(timestamp).toLocaleString() }) : null,
|
|
18
|
+
baseFee ? /* @__PURE__ */ jsx(Chip, { label: `${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI` }) : null,
|
|
19
|
+
blockNumber ? /* @__PURE__ */ jsx(Chip, { label: `${blockNumberLabel} - ${blockNumber}` }) : null
|
|
20
|
+
] });
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
// src/components/HeaderComponents/Header/Header.tsx
|
|
24
|
+
import { useTheme as useTheme2 } from "@mui/material";
|
|
25
|
+
import { useGetTokenData } from "@xyo-network/react-shared";
|
|
26
|
+
|
|
27
|
+
// src/components/HeaderComponents/Header/Heading.tsx
|
|
28
|
+
import { useTheme } from "@mui/material";
|
|
29
|
+
import { TypographyEx } from "@xyo-network/react-shared";
|
|
30
|
+
import { jsxs as jsxs2 } from "react/jsx-runtime";
|
|
31
|
+
var GasPriceHeadingTypography = ({ children, heading, networkIcon, ...props }) => {
|
|
32
|
+
const theme = useTheme();
|
|
33
|
+
return /* @__PURE__ */ jsxs2(TypographyEx, { fontSize: theme.spacing(6), lineHeight: 1, ...props, children: [
|
|
34
|
+
heading,
|
|
35
|
+
" ",
|
|
36
|
+
networkIcon,
|
|
37
|
+
" ",
|
|
38
|
+
children
|
|
39
|
+
] });
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
// src/components/HeaderComponents/Header/Header.tsx
|
|
43
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
44
|
+
var GasPriceHeaderTypography = ({ heading, children, ...props }) => {
|
|
45
|
+
const theme = useTheme2();
|
|
46
|
+
const [ethData] = useGetTokenData(["eth"]);
|
|
47
|
+
const networkIcon = /* @__PURE__ */ jsx2("img", { height: theme.spacing(4), src: ethData.icon });
|
|
48
|
+
return /* @__PURE__ */ jsx2(GasPriceHeadingTypography, { heading, networkIcon, ...props, children });
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// src/components/layout/StyledCardHeader.tsx
|
|
52
|
+
import { CardHeader, styled } from "@mui/material";
|
|
53
|
+
var StyledCardHeader = styled(CardHeader, { name: "StyledCardHeader" })(({ theme }) => ({
|
|
54
|
+
flexWrap: "wrap",
|
|
55
|
+
rowGap: theme.spacing(2)
|
|
56
|
+
}));
|
|
57
|
+
|
|
58
|
+
// src/components/CardHeader/CardHeader.tsx
|
|
59
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
60
|
+
var GasPriceWitnessCardHeader = forwardRef(({ title, parsedPayload, ...props }, ref) => /* @__PURE__ */ jsx3(
|
|
61
|
+
StyledCardHeader,
|
|
62
|
+
{
|
|
63
|
+
title: /* @__PURE__ */ jsx3(GasPriceHeaderTypography, { heading: title }),
|
|
64
|
+
action: /* @__PURE__ */ jsx3(
|
|
65
|
+
GasPriceHeaderActionsBox,
|
|
66
|
+
{
|
|
67
|
+
timestamp: parsedPayload?.timestamp,
|
|
68
|
+
baseFee: parsedPayload?.baseFee?.value,
|
|
69
|
+
baseFeeLabel: parsedPayload?.baseFee?.label,
|
|
70
|
+
blockNumber: parsedPayload?.blockNumber?.value,
|
|
71
|
+
blockNumberLabel: parsedPayload?.blockNumber?.label
|
|
72
|
+
}
|
|
73
|
+
),
|
|
74
|
+
ref,
|
|
75
|
+
...props
|
|
76
|
+
}
|
|
77
|
+
));
|
|
78
|
+
GasPriceWitnessCardHeader.displayName = "GasPriceWitnessCardHeader";
|
|
79
|
+
export {
|
|
80
|
+
GasPriceWitnessCardHeader
|
|
81
|
+
};
|
|
2
82
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CardHeader/
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CardHeader/CardHeader.tsx","../../../../src/components/HeaderComponents/Actions.tsx","../../../../src/components/HeaderComponents/Header/Header.tsx","../../../../src/components/HeaderComponents/Header/Heading.tsx","../../../../src/components/layout/StyledCardHeader.tsx"],"sourcesContent":["import { CardProps } from '@mui/material'\nimport { forwardRef } from 'react'\n\nimport { GasPriceWitnessUIBasePayload } from '../../types'\nimport { GasPriceHeaderActionsBox, GasPriceHeaderTypography } from '../HeaderComponents'\nimport { StyledCardHeader } from '../layout'\n\nexport interface GasPriceCardHeaderProps extends CardProps {\n parsedPayload?: GasPriceWitnessUIBasePayload\n title?: string\n}\nexport const GasPriceWitnessCardHeader = forwardRef<HTMLDivElement, GasPriceCardHeaderProps>(({ title, parsedPayload, ...props }, ref) => (\n <StyledCardHeader\n title={<GasPriceHeaderTypography heading={title} />}\n action={\n <GasPriceHeaderActionsBox\n timestamp={parsedPayload?.timestamp}\n baseFee={parsedPayload?.baseFee?.value}\n baseFeeLabel={parsedPayload?.baseFee?.label}\n blockNumber={parsedPayload?.blockNumber?.value}\n blockNumberLabel={parsedPayload?.blockNumber?.label}\n />\n }\n ref={ref}\n {...props}\n />\n))\n\nGasPriceWitnessCardHeader.displayName = 'GasPriceWitnessCardHeader'\n","import { Chip } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\n\nexport interface GasPriceEstimateActionsBoxProps extends FlexBoxProps {\n baseFee?: number\n baseFeeLabel?: string\n blockNumber?: number\n blockNumberLabel?: string\n timestamp?: number\n}\n\nexport const GasPriceHeaderActionsBox: React.FC<GasPriceEstimateActionsBoxProps> = ({\n baseFee,\n baseFeeLabel = 'Base Fee',\n blockNumber,\n blockNumberLabel = 'Block Number',\n timestamp,\n ...props\n}) => {\n return (\n <FlexRow columnGap={1} rowGap={1} flexWrap=\"wrap\" {...props}>\n {timestamp ? <Chip label={new Date(timestamp).toLocaleString()} /> : null}\n {baseFee ? <Chip label={`${baseFeeLabel} - ${baseFee.toFixed(2)} GWEI`} /> : null}\n {blockNumber ? <Chip label={`${blockNumberLabel} - ${blockNumber}`} /> : null}\n </FlexRow>\n )\n}\n","import { useTheme } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { TypographyExProps, useGetTokenData } from '@xyo-network/react-shared'\n\nimport { GasPriceHeadingTypography } from './Heading'\n\nexport interface GasPriceHeaderTypographyProps extends TypographyExProps, WithChildren {\n heading?: string\n}\n\nexport const GasPriceHeaderTypography: React.FC<GasPriceHeaderTypographyProps> = ({ heading, children, ...props }) => {\n const theme = useTheme()\n const [ethData] = useGetTokenData(['eth'])\n const networkIcon = <img height={theme.spacing(4)} src={ethData.icon} />\n\n return (\n <GasPriceHeadingTypography heading={heading} networkIcon={networkIcon} {...props}>\n {children}\n </GasPriceHeadingTypography>\n )\n}\n","import { useTheme } from '@mui/material'\nimport { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\nimport { ReactNode } from 'react'\n\nexport interface GasPriceHeadingTypographyProps extends TypographyExProps {\n children?: ReactNode\n heading?: string\n networkIcon?: ReactNode\n}\n\nexport const GasPriceHeadingTypography: React.FC<GasPriceHeadingTypographyProps> = ({ children, heading, networkIcon, ...props }) => {\n const theme = useTheme()\n return (\n <TypographyEx fontSize={theme.spacing(6)} lineHeight={1} {...props}>\n {heading} {networkIcon} {children}\n </TypographyEx>\n )\n}\n","import { CardHeader, styled } from '@mui/material'\n\nexport const StyledCardHeader = styled(CardHeader, { name: 'StyledCardHeader' })(({ theme }) => ({\n flexWrap: 'wrap',\n rowGap: theme.spacing(2),\n}))\n"],"mappings":";AACA,SAAS,kBAAkB;;;ACD3B,SAAS,YAAY;AACrB,SAAuB,eAAe;AAmBlC,SACe,KADf;AATG,IAAM,2BAAsE,CAAC;AAAA,EAClF;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,qBAAC,WAAQ,WAAW,GAAG,QAAQ,GAAG,UAAS,QAAQ,GAAG,OACnD;AAAA,gBAAY,oBAAC,QAAK,OAAO,IAAI,KAAK,SAAS,EAAE,eAAe,GAAG,IAAK;AAAA,IACpE,UAAU,oBAAC,QAAK,OAAO,GAAG,YAAY,MAAM,QAAQ,QAAQ,CAAC,CAAC,SAAS,IAAK;AAAA,IAC5E,cAAc,oBAAC,QAAK,OAAO,GAAG,gBAAgB,MAAM,WAAW,IAAI,IAAK;AAAA,KAC3E;AAEJ;;;AC1BA,SAAS,YAAAA,iBAAgB;AAEzB,SAA4B,uBAAuB;;;ACFnD,SAAS,gBAAgB;AACzB,SAAS,oBAAuC;AAY5C,iBAAAC,aAAA;AAHG,IAAM,4BAAsE,CAAC,EAAE,UAAU,SAAS,aAAa,GAAG,MAAM,MAAM;AACnI,QAAM,QAAQ,SAAS;AACvB,SACE,gBAAAA,MAAC,gBAAa,UAAU,MAAM,QAAQ,CAAC,GAAG,YAAY,GAAI,GAAG,OAC1D;AAAA;AAAA,IAAQ;AAAA,IAAE;AAAA,IAAY;AAAA,IAAE;AAAA,KAC3B;AAEJ;;;ADJsB,gBAAAC,YAAA;AAHf,IAAM,2BAAoE,CAAC,EAAE,SAAS,UAAU,GAAG,MAAM,MAAM;AACpH,QAAM,QAAQC,UAAS;AACvB,QAAM,CAAC,OAAO,IAAI,gBAAgB,CAAC,KAAK,CAAC;AACzC,QAAM,cAAc,gBAAAD,KAAC,SAAI,QAAQ,MAAM,QAAQ,CAAC,GAAG,KAAK,QAAQ,MAAM;AAEtE,SACE,gBAAAA,KAAC,6BAA0B,SAAkB,aAA2B,GAAG,OACxE,UACH;AAEJ;;;AEpBA,SAAS,YAAY,cAAc;AAE5B,IAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AACzB,EAAE;;;AJQS,gBAAAE,YAAA;AAFJ,IAAM,4BAA4B,WAAoD,CAAC,EAAE,OAAO,eAAe,GAAG,MAAM,GAAG,QAChI,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,OAAO,gBAAAA,KAAC,4BAAyB,SAAS,OAAO;AAAA,IACjD,QACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,eAAe;AAAA,QAC1B,SAAS,eAAe,SAAS;AAAA,QACjC,cAAc,eAAe,SAAS;AAAA,QACtC,aAAa,eAAe,aAAa;AAAA,QACzC,kBAAkB,eAAe,aAAa;AAAA;AAAA,IAChD;AAAA,IAEF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,0BAA0B,cAAc;","names":["useTheme","jsxs","jsx","useTheme","jsx"]}
|
|
@@ -1,16 +1,69 @@
|
|
|
1
|
-
|
|
2
|
-
import { Card, Paper, useTheme } from "@mui/material";
|
|
3
|
-
import { FlexGrowCol } from "@xylabs/react-flexbox";
|
|
1
|
+
// src/components/GasFees/Card.tsx
|
|
2
|
+
import { Card, Paper, useTheme as useTheme4 } from "@mui/material";
|
|
3
|
+
import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
|
|
4
4
|
import { CardContentEx } from "@xyo-network/react-card";
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
|
|
6
|
+
// src/components/GasFees/components/GasPriceBox.tsx
|
|
7
|
+
import { useTheme } from "@mui/material";
|
|
8
|
+
import { FlexRow } from "@xylabs/react-flexbox";
|
|
9
|
+
import { TypographyEx as TypographyEx2 } from "@xyo-network/react-shared";
|
|
10
|
+
|
|
11
|
+
// src/components/GasFees/components/GweiLabelTypography.tsx
|
|
12
|
+
import { TypographyEx } from "@xyo-network/react-shared";
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
var GweiLabelTypography = (props) => /* @__PURE__ */ jsx(TypographyEx, { variant: "caption", ...props, children: "GWEI" });
|
|
15
|
+
|
|
16
|
+
// src/components/GasFees/components/GasPriceBox.tsx
|
|
17
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
18
|
+
var GasPriceBox = ({ gasPrice, ...props }) => {
|
|
7
19
|
const theme = useTheme();
|
|
8
|
-
return /* @__PURE__ */
|
|
9
|
-
/* @__PURE__ */
|
|
10
|
-
|
|
11
|
-
|
|
20
|
+
return /* @__PURE__ */ jsxs(FlexRow, { columnGap: 1.5, rowGap: 1.5, alignItems: "end", ...props, children: [
|
|
21
|
+
/* @__PURE__ */ jsx2(TypographyEx2, { lineHeight: 1, fontWeight: "200", fontSize: theme.spacing(6), title: gasPrice?.toString() ?? "", children: gasPrice?.toFixed(2) }),
|
|
22
|
+
/* @__PURE__ */ jsx2(GweiLabelTypography, { fontSize: theme.spacing(2) })
|
|
23
|
+
] });
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
// src/components/GasFees/components/PriorityFeeBox.tsx
|
|
27
|
+
import { LocalGasStationRounded as LocalGasStationRoundedIcon } from "@mui/icons-material";
|
|
28
|
+
import { useTheme as useTheme2 } from "@mui/material";
|
|
29
|
+
import { FlexCol, FlexGrowRow } from "@xylabs/react-flexbox";
|
|
30
|
+
import { TypographyEx as TypographyEx3 } from "@xyo-network/react-shared";
|
|
31
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
32
|
+
var PriorityFeeBox = ({ priorityFee, priorityFeeLabel = "Priority Fee", ...props }) => {
|
|
33
|
+
const theme = useTheme2();
|
|
34
|
+
return /* @__PURE__ */ jsxs2(FlexGrowRow, { width: "100%", justifyContent: "space-between", alignItems: "end", ...props, children: [
|
|
35
|
+
/* @__PURE__ */ jsxs2(FlexCol, { alignItems: "start", children: [
|
|
36
|
+
/* @__PURE__ */ jsx3(TypographyEx3, { children: priorityFeeLabel }),
|
|
37
|
+
/* @__PURE__ */ jsxs2(TypographyEx3, { title: priorityFee?.toString() ?? "", children: [
|
|
38
|
+
priorityFee?.toFixed(2),
|
|
39
|
+
" ",
|
|
40
|
+
/* @__PURE__ */ jsx3(GweiLabelTypography, { fontSize: theme.spacing(1) })
|
|
41
|
+
] })
|
|
42
|
+
] }),
|
|
43
|
+
/* @__PURE__ */ jsx3(LocalGasStationRoundedIcon, {})
|
|
44
|
+
] });
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
// src/components/GasFees/components/SpeedBox.tsx
|
|
48
|
+
import { useTheme as useTheme3 } from "@mui/material";
|
|
49
|
+
import { FlexGrowCol } from "@xylabs/react-flexbox";
|
|
50
|
+
import { TypographyEx as TypographyEx4 } from "@xyo-network/react-shared";
|
|
51
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
52
|
+
var SpeedBox = ({ speed, ...props }) => {
|
|
53
|
+
const theme = useTheme3();
|
|
54
|
+
return speed ? /* @__PURE__ */ jsx4(FlexGrowCol, { ...props, children: /* @__PURE__ */ jsx4(TypographyEx4, { fontSize: theme.spacing(3), fontWeight: "200", p: 1, children: speed }) }) : null;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
// src/components/GasFees/Card.tsx
|
|
58
|
+
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
59
|
+
var GasFeeCard = ({ gasPrice, speedPaperElevation, priorityFee, priorityFeeLabel, speed = "low", ...props }) => {
|
|
60
|
+
const theme = useTheme4();
|
|
61
|
+
return /* @__PURE__ */ jsx5(Card, { sx: { p: 0 }, ...props, children: /* @__PURE__ */ jsxs3(CardContentEx, { removePadding: true, sx: { flexDirection: "column", flexGrow: 1, p: 0, rowGap: 2 }, children: [
|
|
62
|
+
/* @__PURE__ */ jsxs3(FlexGrowCol2, { bgcolor: theme.palette.secondary.dark, alignItems: "start", p: 2, rowGap: 1.5, color: theme.palette.common.white, children: [
|
|
63
|
+
/* @__PURE__ */ jsx5(GasPriceBox, { gasPrice }),
|
|
64
|
+
priorityFee ? /* @__PURE__ */ jsx5(PriorityFeeBox, { priorityFee, priorityFeeLabel }) : null
|
|
12
65
|
] }),
|
|
13
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ jsx5(Paper, { elevation: speedPaperElevation, sx: { borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }, children: /* @__PURE__ */ jsx5(SpeedBox, { speed }) })
|
|
14
67
|
] }) });
|
|
15
68
|
};
|
|
16
69
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/GasFees/Card.tsx"],"sourcesContent":["import { Card, CardProps, Paper, useTheme } from '@mui/material'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { CardContentEx } from '@xyo-network/react-card'\n\nimport { GasPriceBox, PriorityFeeBox, SpeedBox } from './components'\n\nexport interface GasFeeCardProps extends CardProps {\n gasPrice?: number\n priorityFee?: number\n priorityFeeLabel?: string\n speed?: string\n speedPaperElevation?: number\n}\n\nexport const GasFeeCard: React.FC<GasFeeCardProps> = ({ gasPrice, speedPaperElevation, priorityFee, priorityFeeLabel, speed = 'low', ...props }) => {\n const theme = useTheme()\n\n return (\n <Card sx={{ p: 0 }} {...props}>\n <CardContentEx removePadding sx={{ flexDirection: 'column', flexGrow: 1, p: 0, rowGap: 2 }}>\n <FlexGrowCol bgcolor={theme.palette.secondary.dark} alignItems=\"start\" p={2} rowGap={1.5} color={theme.palette.common.white}>\n <GasPriceBox gasPrice={gasPrice} />\n {priorityFee ? <PriorityFeeBox priorityFee={priorityFee} priorityFeeLabel={priorityFeeLabel} /> : null}\n </FlexGrowCol>\n <Paper elevation={speedPaperElevation} sx={{ borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }}>\n <SpeedBox speed={speed} />\n </Paper>\n </CardContentEx>\n </Card>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/GasFees/Card.tsx","../../../../src/components/GasFees/components/GasPriceBox.tsx","../../../../src/components/GasFees/components/GweiLabelTypography.tsx","../../../../src/components/GasFees/components/PriorityFeeBox.tsx","../../../../src/components/GasFees/components/SpeedBox.tsx"],"sourcesContent":["import { Card, CardProps, Paper, useTheme } from '@mui/material'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { CardContentEx } from '@xyo-network/react-card'\n\nimport { GasPriceBox, PriorityFeeBox, SpeedBox } from './components'\n\nexport interface GasFeeCardProps extends CardProps {\n gasPrice?: number\n priorityFee?: number\n priorityFeeLabel?: string\n speed?: string\n speedPaperElevation?: number\n}\n\nexport const GasFeeCard: React.FC<GasFeeCardProps> = ({ gasPrice, speedPaperElevation, priorityFee, priorityFeeLabel, speed = 'low', ...props }) => {\n const theme = useTheme()\n\n return (\n <Card sx={{ p: 0 }} {...props}>\n <CardContentEx removePadding sx={{ flexDirection: 'column', flexGrow: 1, p: 0, rowGap: 2 }}>\n <FlexGrowCol bgcolor={theme.palette.secondary.dark} alignItems=\"start\" p={2} rowGap={1.5} color={theme.palette.common.white}>\n <GasPriceBox gasPrice={gasPrice} />\n {priorityFee ? <PriorityFeeBox priorityFee={priorityFee} priorityFeeLabel={priorityFeeLabel} /> : null}\n </FlexGrowCol>\n <Paper elevation={speedPaperElevation} sx={{ borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }}>\n <SpeedBox speed={speed} />\n </Paper>\n </CardContentEx>\n </Card>\n )\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nimport { GweiLabelTypography } from './GweiLabelTypography'\n\nexport interface GasPriceBoxProps extends FlexBoxProps {\n gasPrice?: number\n}\n\nexport const GasPriceBox: React.FC<GasPriceBoxProps> = ({ gasPrice, ...props }) => {\n const theme = useTheme()\n return (\n <FlexRow columnGap={1.5} rowGap={1.5} alignItems=\"end\" {...props}>\n <TypographyEx lineHeight={1} fontWeight=\"200\" fontSize={theme.spacing(6)} title={gasPrice?.toString() ?? ''}>\n {gasPrice?.toFixed(2)}\n </TypographyEx>\n <GweiLabelTypography fontSize={theme.spacing(2)} />\n </FlexRow>\n )\n}\n","import { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\n\nexport const GweiLabelTypography: React.FC<TypographyExProps> = (props) => (\n <TypographyEx variant=\"caption\" {...props}>\n GWEI\n </TypographyEx>\n)\n","import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nimport { GweiLabelTypography } from './GweiLabelTypography'\n\nexport interface PriorityFeeBoxProps extends FlexBoxProps {\n priorityFee?: number\n priorityFeeLabel?: string\n}\n\nexport const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({ priorityFee, priorityFeeLabel = 'Priority Fee', ...props }) => {\n const theme = useTheme()\n\n return (\n <FlexGrowRow width=\"100%\" justifyContent=\"space-between\" alignItems=\"end\" {...props}>\n <FlexCol alignItems=\"start\">\n <TypographyEx>{priorityFeeLabel}</TypographyEx>\n <TypographyEx title={priorityFee?.toString() ?? ''}>\n {priorityFee?.toFixed(2)} <GweiLabelTypography fontSize={theme.spacing(1)} />\n </TypographyEx>\n </FlexCol>\n <LocalGasStationRoundedIcon />\n </FlexGrowRow>\n )\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nexport interface SpeedBoxProps extends FlexBoxProps {\n speed?: string\n}\n\nexport const SpeedBox: React.FC<SpeedBoxProps> = ({ speed, ...props }) => {\n const theme = useTheme()\n\n return speed ? (\n <FlexGrowCol {...props}>\n <TypographyEx fontSize={theme.spacing(3)} fontWeight=\"200\" p={1}>\n {speed}\n </TypographyEx>\n </FlexGrowCol>\n ) : null\n}\n"],"mappings":";AAAA,SAAS,MAAiB,OAAO,YAAAA,iBAAgB;AACjD,SAAS,eAAAC,oBAAmB;AAC5B,SAAS,qBAAqB;;;ACF9B,SAAS,gBAAgB;AACzB,SAAuB,eAAe;AACtC,SAAS,gBAAAC,qBAAoB;;;ACF7B,SAAS,oBAAuC;AAG9C;AADK,IAAM,sBAAmD,CAAC,UAC/D,oBAAC,gBAAa,SAAQ,WAAW,GAAG,OAAO,kBAE3C;;;ADQE,SACE,OAAAC,MADF;AAHG,IAAM,cAA0C,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM;AACjF,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,WAAQ,WAAW,KAAK,QAAQ,KAAK,YAAW,OAAO,GAAG,OACzD;AAAA,oBAAAA,KAACC,eAAA,EAAa,YAAY,GAAG,YAAW,OAAM,UAAU,MAAM,QAAQ,CAAC,GAAG,OAAO,UAAU,SAAS,KAAK,IACtG,oBAAU,QAAQ,CAAC,GACtB;AAAA,IACA,gBAAAD,KAAC,uBAAoB,UAAU,MAAM,QAAQ,CAAC,GAAG;AAAA,KACnD;AAEJ;;;AEpBA,SAAS,0BAA0B,kCAAkC;AACrE,SAAS,YAAAE,iBAAgB;AACzB,SAAuB,SAAS,mBAAmB;AACnD,SAAS,gBAAAC,qBAAoB;AAerB,gBAAAC,MACA,QAAAC,aADA;AAND,IAAM,iBAAgD,CAAC,EAAE,aAAa,mBAAmB,gBAAgB,GAAG,MAAM,MAAM;AAC7H,QAAM,QAAQC,UAAS;AAEvB,SACE,gBAAAD,MAAC,eAAY,OAAM,QAAO,gBAAe,iBAAgB,YAAW,OAAO,GAAG,OAC5E;AAAA,oBAAAA,MAAC,WAAQ,YAAW,SAClB;AAAA,sBAAAD,KAACG,eAAA,EAAc,4BAAiB;AAAA,MAChC,gBAAAF,MAACE,eAAA,EAAa,OAAO,aAAa,SAAS,KAAK,IAC7C;AAAA,qBAAa,QAAQ,CAAC;AAAA,QAAE;AAAA,QAAC,gBAAAH,KAAC,uBAAoB,UAAU,MAAM,QAAQ,CAAC,GAAG;AAAA,SAC7E;AAAA,OACF;AAAA,IACA,gBAAAA,KAAC,8BAA2B;AAAA,KAC9B;AAEJ;;;AC1BA,SAAS,YAAAI,iBAAgB;AACzB,SAAuB,mBAAmB;AAC1C,SAAS,gBAAAC,qBAAoB;AAWvB,gBAAAC,YAAA;AALC,IAAM,WAAoC,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACxE,QAAM,QAAQF,UAAS;AAEvB,SAAO,QACL,gBAAAE,KAAC,eAAa,GAAG,OACf,0BAAAA,KAACD,eAAA,EAAa,UAAU,MAAM,QAAQ,CAAC,GAAG,YAAW,OAAM,GAAG,GAC3D,iBACH,GACF,IACE;AACN;;;AJEQ,SACE,OAAAE,MADF,QAAAC,aAAA;AAND,IAAM,aAAwC,CAAC,EAAE,UAAU,qBAAqB,aAAa,kBAAkB,QAAQ,OAAO,GAAG,MAAM,MAAM;AAClJ,QAAM,QAAQC,UAAS;AAEvB,SACE,gBAAAF,KAAC,QAAK,IAAI,EAAE,GAAG,EAAE,GAAI,GAAG,OACtB,0BAAAC,MAAC,iBAAc,eAAa,MAAC,IAAI,EAAE,eAAe,UAAU,UAAU,GAAG,GAAG,GAAG,QAAQ,EAAE,GACvF;AAAA,oBAAAA,MAACE,cAAA,EAAY,SAAS,MAAM,QAAQ,UAAU,MAAM,YAAW,SAAQ,GAAG,GAAG,QAAQ,KAAK,OAAO,MAAM,QAAQ,OAAO,OACpH;AAAA,sBAAAH,KAAC,eAAY,UAAoB;AAAA,MAChC,cAAc,gBAAAA,KAAC,kBAAe,aAA0B,kBAAoC,IAAK;AAAA,OACpG;AAAA,IACA,gBAAAA,KAAC,SAAM,WAAW,qBAAqB,IAAI,EAAE,cAAc,OAAO,MAAM,MAAM,YAAY,MAAM,MAAM,MAAM,YAAY,KAAK,GAC3H,0BAAAA,KAAC,YAAS,OAAc,GAC1B;AAAA,KACF,GACF;AAEJ;","names":["useTheme","FlexGrowCol","TypographyEx","jsx","TypographyEx","useTheme","TypographyEx","jsx","jsxs","useTheme","TypographyEx","useTheme","TypographyEx","jsx","jsx","jsxs","useTheme","FlexGrowCol"]}
|
|
@@ -1,13 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/GasFees/components/GasPriceBox.tsx
|
|
2
2
|
import { useTheme } from "@mui/material";
|
|
3
3
|
import { FlexRow } from "@xylabs/react-flexbox";
|
|
4
|
+
import { TypographyEx as TypographyEx2 } from "@xyo-network/react-shared";
|
|
5
|
+
|
|
6
|
+
// src/components/GasFees/components/GweiLabelTypography.tsx
|
|
4
7
|
import { TypographyEx } from "@xyo-network/react-shared";
|
|
5
|
-
import {
|
|
6
|
-
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var GweiLabelTypography = (props) => /* @__PURE__ */ jsx(TypographyEx, { variant: "caption", ...props, children: "GWEI" });
|
|
10
|
+
|
|
11
|
+
// src/components/GasFees/components/GasPriceBox.tsx
|
|
12
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
13
|
+
var GasPriceBox = ({ gasPrice, ...props }) => {
|
|
7
14
|
const theme = useTheme();
|
|
8
15
|
return /* @__PURE__ */ jsxs(FlexRow, { columnGap: 1.5, rowGap: 1.5, alignItems: "end", ...props, children: [
|
|
9
|
-
/* @__PURE__ */
|
|
10
|
-
/* @__PURE__ */
|
|
16
|
+
/* @__PURE__ */ jsx2(TypographyEx2, { lineHeight: 1, fontWeight: "200", fontSize: theme.spacing(6), title: gasPrice?.toString() ?? "", children: gasPrice?.toFixed(2) }),
|
|
17
|
+
/* @__PURE__ */ jsx2(GweiLabelTypography, { fontSize: theme.spacing(2) })
|
|
11
18
|
] });
|
|
12
19
|
};
|
|
13
20
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/GasFees/components/GasPriceBox.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nimport { GweiLabelTypography } from './GweiLabelTypography'\n\nexport interface GasPriceBoxProps extends FlexBoxProps {\n gasPrice?: number\n}\n\nexport const GasPriceBox: React.FC<GasPriceBoxProps> = ({ gasPrice, ...props }) => {\n const theme = useTheme()\n return (\n <FlexRow columnGap={1.5} rowGap={1.5} alignItems=\"end\" {...props}>\n <TypographyEx lineHeight={1} fontWeight=\"200\" fontSize={theme.spacing(6)} title={gasPrice?.toString() ?? ''}>\n {gasPrice?.toFixed(2)}\n </TypographyEx>\n <GweiLabelTypography fontSize={theme.spacing(2)} />\n </FlexRow>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/GasFees/components/GasPriceBox.tsx","../../../../../src/components/GasFees/components/GweiLabelTypography.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nimport { GweiLabelTypography } from './GweiLabelTypography'\n\nexport interface GasPriceBoxProps extends FlexBoxProps {\n gasPrice?: number\n}\n\nexport const GasPriceBox: React.FC<GasPriceBoxProps> = ({ gasPrice, ...props }) => {\n const theme = useTheme()\n return (\n <FlexRow columnGap={1.5} rowGap={1.5} alignItems=\"end\" {...props}>\n <TypographyEx lineHeight={1} fontWeight=\"200\" fontSize={theme.spacing(6)} title={gasPrice?.toString() ?? ''}>\n {gasPrice?.toFixed(2)}\n </TypographyEx>\n <GweiLabelTypography fontSize={theme.spacing(2)} />\n </FlexRow>\n )\n}\n","import { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\n\nexport const GweiLabelTypography: React.FC<TypographyExProps> = (props) => (\n <TypographyEx variant=\"caption\" {...props}>\n GWEI\n </TypographyEx>\n)\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAuB,eAAe;AACtC,SAAS,gBAAAA,qBAAoB;;;ACF7B,SAAS,oBAAuC;AAG9C;AADK,IAAM,sBAAmD,CAAC,UAC/D,oBAAC,gBAAa,SAAQ,WAAW,GAAG,OAAO,kBAE3C;;;ADQE,SACE,OAAAC,MADF;AAHG,IAAM,cAA0C,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM;AACjF,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,WAAQ,WAAW,KAAK,QAAQ,KAAK,YAAW,OAAO,GAAG,OACzD;AAAA,oBAAAA,KAACC,eAAA,EAAa,YAAY,GAAG,YAAW,OAAM,UAAU,MAAM,QAAQ,CAAC,GAAG,OAAO,UAAU,SAAS,KAAK,IACtG,oBAAU,QAAQ,CAAC,GACtB;AAAA,IACA,gBAAAD,KAAC,uBAAoB,UAAU,MAAM,QAAQ,CAAC,GAAG;AAAA,KACnD;AAEJ;","names":["TypographyEx","jsx","TypographyEx"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/GasFees/components/GweiLabelTypography.tsx
|
|
2
2
|
import { TypographyEx } from "@xyo-network/react-shared";
|
|
3
|
-
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
var GweiLabelTypography = (props) => /* @__PURE__ */ jsx(TypographyEx, { variant: "caption", ...props, children: "GWEI" });
|
|
4
5
|
export {
|
|
5
6
|
GweiLabelTypography
|
|
6
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/GasFees/components/GweiLabelTypography.tsx"],"sourcesContent":["import { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\n\nexport const GweiLabelTypography: React.FC<TypographyExProps> = (props) => (\n <TypographyEx variant=\"caption\" {...props}>\n GWEI\n </TypographyEx>\n)\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/GasFees/components/GweiLabelTypography.tsx"],"sourcesContent":["import { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\n\nexport const GweiLabelTypography: React.FC<TypographyExProps> = (props) => (\n <TypographyEx variant=\"caption\" {...props}>\n GWEI\n </TypographyEx>\n)\n"],"mappings":";AAAA,SAAS,oBAAuC;AAG9C;AADK,IAAM,sBAAmD,CAAC,UAC/D,oBAAC,gBAAa,SAAQ,WAAW,GAAG,OAAO,kBAE3C;","names":[]}
|
|
@@ -1,21 +1,28 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/GasFees/components/PriorityFeeBox.tsx
|
|
2
2
|
import { LocalGasStationRounded as LocalGasStationRoundedIcon } from "@mui/icons-material";
|
|
3
3
|
import { useTheme } from "@mui/material";
|
|
4
4
|
import { FlexCol, FlexGrowRow } from "@xylabs/react-flexbox";
|
|
5
|
+
import { TypographyEx as TypographyEx2 } from "@xyo-network/react-shared";
|
|
6
|
+
|
|
7
|
+
// src/components/GasFees/components/GweiLabelTypography.tsx
|
|
5
8
|
import { TypographyEx } from "@xyo-network/react-shared";
|
|
6
|
-
import {
|
|
7
|
-
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
var GweiLabelTypography = (props) => /* @__PURE__ */ jsx(TypographyEx, { variant: "caption", ...props, children: "GWEI" });
|
|
11
|
+
|
|
12
|
+
// src/components/GasFees/components/PriorityFeeBox.tsx
|
|
13
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
14
|
+
var PriorityFeeBox = ({ priorityFee, priorityFeeLabel = "Priority Fee", ...props }) => {
|
|
8
15
|
const theme = useTheme();
|
|
9
16
|
return /* @__PURE__ */ jsxs(FlexGrowRow, { width: "100%", justifyContent: "space-between", alignItems: "end", ...props, children: [
|
|
10
17
|
/* @__PURE__ */ jsxs(FlexCol, { alignItems: "start", children: [
|
|
11
|
-
/* @__PURE__ */
|
|
12
|
-
/* @__PURE__ */ jsxs(
|
|
18
|
+
/* @__PURE__ */ jsx2(TypographyEx2, { children: priorityFeeLabel }),
|
|
19
|
+
/* @__PURE__ */ jsxs(TypographyEx2, { title: priorityFee?.toString() ?? "", children: [
|
|
13
20
|
priorityFee?.toFixed(2),
|
|
14
21
|
" ",
|
|
15
|
-
/* @__PURE__ */
|
|
22
|
+
/* @__PURE__ */ jsx2(GweiLabelTypography, { fontSize: theme.spacing(1) })
|
|
16
23
|
] })
|
|
17
24
|
] }),
|
|
18
|
-
/* @__PURE__ */
|
|
25
|
+
/* @__PURE__ */ jsx2(LocalGasStationRoundedIcon, {})
|
|
19
26
|
] });
|
|
20
27
|
};
|
|
21
28
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/GasFees/components/PriorityFeeBox.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nimport { GweiLabelTypography } from './GweiLabelTypography'\n\nexport interface PriorityFeeBoxProps extends FlexBoxProps {\n priorityFee?: number\n priorityFeeLabel?: string\n}\n\nexport const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({ priorityFee, priorityFeeLabel = 'Priority Fee', ...props }) => {\n const theme = useTheme()\n\n return (\n <FlexGrowRow width=\"100%\" justifyContent=\"space-between\" alignItems=\"end\" {...props}>\n <FlexCol alignItems=\"start\">\n <TypographyEx>{priorityFeeLabel}</TypographyEx>\n <TypographyEx title={priorityFee?.toString() ?? ''}>\n {priorityFee?.toFixed(2)} <GweiLabelTypography fontSize={theme.spacing(1)} />\n </TypographyEx>\n </FlexCol>\n <LocalGasStationRoundedIcon />\n </FlexGrowRow>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/GasFees/components/PriorityFeeBox.tsx","../../../../../src/components/GasFees/components/GweiLabelTypography.tsx"],"sourcesContent":["import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nimport { GweiLabelTypography } from './GweiLabelTypography'\n\nexport interface PriorityFeeBoxProps extends FlexBoxProps {\n priorityFee?: number\n priorityFeeLabel?: string\n}\n\nexport const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({ priorityFee, priorityFeeLabel = 'Priority Fee', ...props }) => {\n const theme = useTheme()\n\n return (\n <FlexGrowRow width=\"100%\" justifyContent=\"space-between\" alignItems=\"end\" {...props}>\n <FlexCol alignItems=\"start\">\n <TypographyEx>{priorityFeeLabel}</TypographyEx>\n <TypographyEx title={priorityFee?.toString() ?? ''}>\n {priorityFee?.toFixed(2)} <GweiLabelTypography fontSize={theme.spacing(1)} />\n </TypographyEx>\n </FlexCol>\n <LocalGasStationRoundedIcon />\n </FlexGrowRow>\n )\n}\n","import { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\n\nexport const GweiLabelTypography: React.FC<TypographyExProps> = (props) => (\n <TypographyEx variant=\"caption\" {...props}>\n GWEI\n </TypographyEx>\n)\n"],"mappings":";AAAA,SAAS,0BAA0B,kCAAkC;AACrE,SAAS,gBAAgB;AACzB,SAAuB,SAAS,mBAAmB;AACnD,SAAS,gBAAAA,qBAAoB;;;ACH7B,SAAS,oBAAuC;AAG9C;AADK,IAAM,sBAAmD,CAAC,UAC/D,oBAAC,gBAAa,SAAQ,WAAW,GAAG,OAAO,kBAE3C;;;ADaM,gBAAAC,MACA,YADA;AAND,IAAM,iBAAgD,CAAC,EAAE,aAAa,mBAAmB,gBAAgB,GAAG,MAAM,MAAM;AAC7H,QAAM,QAAQ,SAAS;AAEvB,SACE,qBAAC,eAAY,OAAM,QAAO,gBAAe,iBAAgB,YAAW,OAAO,GAAG,OAC5E;AAAA,yBAAC,WAAQ,YAAW,SAClB;AAAA,sBAAAA,KAACC,eAAA,EAAc,4BAAiB;AAAA,MAChC,qBAACA,eAAA,EAAa,OAAO,aAAa,SAAS,KAAK,IAC7C;AAAA,qBAAa,QAAQ,CAAC;AAAA,QAAE;AAAA,QAAC,gBAAAD,KAAC,uBAAoB,UAAU,MAAM,QAAQ,CAAC,GAAG;AAAA,SAC7E;AAAA,OACF;AAAA,IACA,gBAAAA,KAAC,8BAA2B;AAAA,KAC9B;AAEJ;","names":["TypographyEx","jsx","TypographyEx"]}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/GasFees/components/SpeedBox.tsx
|
|
2
2
|
import { useTheme } from "@mui/material";
|
|
3
3
|
import { FlexGrowCol } from "@xylabs/react-flexbox";
|
|
4
4
|
import { TypographyEx } from "@xyo-network/react-shared";
|
|
5
|
-
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
var SpeedBox = ({ speed, ...props }) => {
|
|
6
7
|
const theme = useTheme();
|
|
7
8
|
return speed ? /* @__PURE__ */ jsx(FlexGrowCol, { ...props, children: /* @__PURE__ */ jsx(TypographyEx, { fontSize: theme.spacing(3), fontWeight: "200", p: 1, children: speed }) }) : null;
|
|
8
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/GasFees/components/SpeedBox.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nexport interface SpeedBoxProps extends FlexBoxProps {\n speed?: string\n}\n\nexport const SpeedBox: React.FC<SpeedBoxProps> = ({ speed, ...props }) => {\n const theme = useTheme()\n\n return speed ? (\n <FlexGrowCol {...props}>\n <TypographyEx fontSize={theme.spacing(3)} fontWeight=\"200\" p={1}>\n {speed}\n </TypographyEx>\n </FlexGrowCol>\n ) : null\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/GasFees/components/SpeedBox.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nexport interface SpeedBoxProps extends FlexBoxProps {\n speed?: string\n}\n\nexport const SpeedBox: React.FC<SpeedBoxProps> = ({ speed, ...props }) => {\n const theme = useTheme()\n\n return speed ? (\n <FlexGrowCol {...props}>\n <TypographyEx fontSize={theme.spacing(3)} fontWeight=\"200\" p={1}>\n {speed}\n </TypographyEx>\n </FlexGrowCol>\n ) : null\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAuB,mBAAmB;AAC1C,SAAS,oBAAoB;AAWvB;AALC,IAAM,WAAoC,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACxE,QAAM,QAAQ,SAAS;AAEvB,SAAO,QACL,oBAAC,eAAa,GAAG,OACf,8BAAC,gBAAa,UAAU,MAAM,QAAQ,CAAC,GAAG,YAAW,OAAM,GAAG,GAC3D,iBACH,GACF,IACE;AACN;","names":[]}
|
|
@@ -1,4 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
// src/components/GasFees/components/GasPriceBox.tsx
|
|
2
|
+
import { useTheme } from "@mui/material";
|
|
3
|
+
import { FlexRow } from "@xylabs/react-flexbox";
|
|
4
|
+
import { TypographyEx as TypographyEx2 } from "@xyo-network/react-shared";
|
|
5
|
+
|
|
6
|
+
// src/components/GasFees/components/GweiLabelTypography.tsx
|
|
7
|
+
import { TypographyEx } from "@xyo-network/react-shared";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var GweiLabelTypography = (props) => /* @__PURE__ */ jsx(TypographyEx, { variant: "caption", ...props, children: "GWEI" });
|
|
10
|
+
|
|
11
|
+
// src/components/GasFees/components/GasPriceBox.tsx
|
|
12
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
13
|
+
var GasPriceBox = ({ gasPrice, ...props }) => {
|
|
14
|
+
const theme = useTheme();
|
|
15
|
+
return /* @__PURE__ */ jsxs(FlexRow, { columnGap: 1.5, rowGap: 1.5, alignItems: "end", ...props, children: [
|
|
16
|
+
/* @__PURE__ */ jsx2(TypographyEx2, { lineHeight: 1, fontWeight: "200", fontSize: theme.spacing(6), title: gasPrice?.toString() ?? "", children: gasPrice?.toFixed(2) }),
|
|
17
|
+
/* @__PURE__ */ jsx2(GweiLabelTypography, { fontSize: theme.spacing(2) })
|
|
18
|
+
] });
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
// src/components/GasFees/components/PriorityFeeBox.tsx
|
|
22
|
+
import { LocalGasStationRounded as LocalGasStationRoundedIcon } from "@mui/icons-material";
|
|
23
|
+
import { useTheme as useTheme2 } from "@mui/material";
|
|
24
|
+
import { FlexCol, FlexGrowRow } from "@xylabs/react-flexbox";
|
|
25
|
+
import { TypographyEx as TypographyEx3 } from "@xyo-network/react-shared";
|
|
26
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
27
|
+
var PriorityFeeBox = ({ priorityFee, priorityFeeLabel = "Priority Fee", ...props }) => {
|
|
28
|
+
const theme = useTheme2();
|
|
29
|
+
return /* @__PURE__ */ jsxs2(FlexGrowRow, { width: "100%", justifyContent: "space-between", alignItems: "end", ...props, children: [
|
|
30
|
+
/* @__PURE__ */ jsxs2(FlexCol, { alignItems: "start", children: [
|
|
31
|
+
/* @__PURE__ */ jsx3(TypographyEx3, { children: priorityFeeLabel }),
|
|
32
|
+
/* @__PURE__ */ jsxs2(TypographyEx3, { title: priorityFee?.toString() ?? "", children: [
|
|
33
|
+
priorityFee?.toFixed(2),
|
|
34
|
+
" ",
|
|
35
|
+
/* @__PURE__ */ jsx3(GweiLabelTypography, { fontSize: theme.spacing(1) })
|
|
36
|
+
] })
|
|
37
|
+
] }),
|
|
38
|
+
/* @__PURE__ */ jsx3(LocalGasStationRoundedIcon, {})
|
|
39
|
+
] });
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
// src/components/GasFees/components/SpeedBox.tsx
|
|
43
|
+
import { useTheme as useTheme3 } from "@mui/material";
|
|
44
|
+
import { FlexGrowCol } from "@xylabs/react-flexbox";
|
|
45
|
+
import { TypographyEx as TypographyEx4 } from "@xyo-network/react-shared";
|
|
46
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
47
|
+
var SpeedBox = ({ speed, ...props }) => {
|
|
48
|
+
const theme = useTheme3();
|
|
49
|
+
return speed ? /* @__PURE__ */ jsx4(FlexGrowCol, { ...props, children: /* @__PURE__ */ jsx4(TypographyEx4, { fontSize: theme.spacing(3), fontWeight: "200", p: 1, children: speed }) }) : null;
|
|
50
|
+
};
|
|
51
|
+
export {
|
|
52
|
+
GasPriceBox,
|
|
53
|
+
PriorityFeeBox,
|
|
54
|
+
SpeedBox
|
|
55
|
+
};
|
|
4
56
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/GasFees/components/
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/GasFees/components/GasPriceBox.tsx","../../../../../src/components/GasFees/components/GweiLabelTypography.tsx","../../../../../src/components/GasFees/components/PriorityFeeBox.tsx","../../../../../src/components/GasFees/components/SpeedBox.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nimport { GweiLabelTypography } from './GweiLabelTypography'\n\nexport interface GasPriceBoxProps extends FlexBoxProps {\n gasPrice?: number\n}\n\nexport const GasPriceBox: React.FC<GasPriceBoxProps> = ({ gasPrice, ...props }) => {\n const theme = useTheme()\n return (\n <FlexRow columnGap={1.5} rowGap={1.5} alignItems=\"end\" {...props}>\n <TypographyEx lineHeight={1} fontWeight=\"200\" fontSize={theme.spacing(6)} title={gasPrice?.toString() ?? ''}>\n {gasPrice?.toFixed(2)}\n </TypographyEx>\n <GweiLabelTypography fontSize={theme.spacing(2)} />\n </FlexRow>\n )\n}\n","import { TypographyEx, TypographyExProps } from '@xyo-network/react-shared'\n\nexport const GweiLabelTypography: React.FC<TypographyExProps> = (props) => (\n <TypographyEx variant=\"caption\" {...props}>\n GWEI\n </TypographyEx>\n)\n","import { LocalGasStationRounded as LocalGasStationRoundedIcon } from '@mui/icons-material'\nimport { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nimport { GweiLabelTypography } from './GweiLabelTypography'\n\nexport interface PriorityFeeBoxProps extends FlexBoxProps {\n priorityFee?: number\n priorityFeeLabel?: string\n}\n\nexport const PriorityFeeBox: React.FC<PriorityFeeBoxProps> = ({ priorityFee, priorityFeeLabel = 'Priority Fee', ...props }) => {\n const theme = useTheme()\n\n return (\n <FlexGrowRow width=\"100%\" justifyContent=\"space-between\" alignItems=\"end\" {...props}>\n <FlexCol alignItems=\"start\">\n <TypographyEx>{priorityFeeLabel}</TypographyEx>\n <TypographyEx title={priorityFee?.toString() ?? ''}>\n {priorityFee?.toFixed(2)} <GweiLabelTypography fontSize={theme.spacing(1)} />\n </TypographyEx>\n </FlexCol>\n <LocalGasStationRoundedIcon />\n </FlexGrowRow>\n )\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { TypographyEx } from '@xyo-network/react-shared'\n\nexport interface SpeedBoxProps extends FlexBoxProps {\n speed?: string\n}\n\nexport const SpeedBox: React.FC<SpeedBoxProps> = ({ speed, ...props }) => {\n const theme = useTheme()\n\n return speed ? (\n <FlexGrowCol {...props}>\n <TypographyEx fontSize={theme.spacing(3)} fontWeight=\"200\" p={1}>\n {speed}\n </TypographyEx>\n </FlexGrowCol>\n ) : null\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAuB,eAAe;AACtC,SAAS,gBAAAA,qBAAoB;;;ACF7B,SAAS,oBAAuC;AAG9C;AADK,IAAM,sBAAmD,CAAC,UAC/D,oBAAC,gBAAa,SAAQ,WAAW,GAAG,OAAO,kBAE3C;;;ADQE,SACE,OAAAC,MADF;AAHG,IAAM,cAA0C,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM;AACjF,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,WAAQ,WAAW,KAAK,QAAQ,KAAK,YAAW,OAAO,GAAG,OACzD;AAAA,oBAAAA,KAACC,eAAA,EAAa,YAAY,GAAG,YAAW,OAAM,UAAU,MAAM,QAAQ,CAAC,GAAG,OAAO,UAAU,SAAS,KAAK,IACtG,oBAAU,QAAQ,CAAC,GACtB;AAAA,IACA,gBAAAD,KAAC,uBAAoB,UAAU,MAAM,QAAQ,CAAC,GAAG;AAAA,KACnD;AAEJ;;;AEpBA,SAAS,0BAA0B,kCAAkC;AACrE,SAAS,YAAAE,iBAAgB;AACzB,SAAuB,SAAS,mBAAmB;AACnD,SAAS,gBAAAC,qBAAoB;AAerB,gBAAAC,MACA,QAAAC,aADA;AAND,IAAM,iBAAgD,CAAC,EAAE,aAAa,mBAAmB,gBAAgB,GAAG,MAAM,MAAM;AAC7H,QAAM,QAAQC,UAAS;AAEvB,SACE,gBAAAD,MAAC,eAAY,OAAM,QAAO,gBAAe,iBAAgB,YAAW,OAAO,GAAG,OAC5E;AAAA,oBAAAA,MAAC,WAAQ,YAAW,SAClB;AAAA,sBAAAD,KAACG,eAAA,EAAc,4BAAiB;AAAA,MAChC,gBAAAF,MAACE,eAAA,EAAa,OAAO,aAAa,SAAS,KAAK,IAC7C;AAAA,qBAAa,QAAQ,CAAC;AAAA,QAAE;AAAA,QAAC,gBAAAH,KAAC,uBAAoB,UAAU,MAAM,QAAQ,CAAC,GAAG;AAAA,SAC7E;AAAA,OACF;AAAA,IACA,gBAAAA,KAAC,8BAA2B;AAAA,KAC9B;AAEJ;;;AC1BA,SAAS,YAAAI,iBAAgB;AACzB,SAAuB,mBAAmB;AAC1C,SAAS,gBAAAC,qBAAoB;AAWvB,gBAAAC,YAAA;AALC,IAAM,WAAoC,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACxE,QAAM,QAAQF,UAAS;AAEvB,SAAO,QACL,gBAAAE,KAAC,eAAa,GAAG,OACf,0BAAAA,KAACD,eAAA,EAAa,UAAU,MAAM,QAAQ,CAAC,GAAG,YAAW,OAAM,GAAG,GAC3D,iBACH,GACF,IACE;AACN;","names":["TypographyEx","jsx","TypographyEx","useTheme","TypographyEx","jsx","jsxs","useTheme","TypographyEx","useTheme","TypographyEx","jsx"]}
|