@xyo-network/react-chain-shared 1.5.7 → 1.5.9

package/dist/browser/index.mjs

@@ -38,6 +38,78 @@ var StyledMenuItem = styled(MenuItem, {
   marginBottom: theme.spacing(1)
 }));
 
+// src/components/stack/DetailsStack.tsx
+import { Stack, styled as styled2, Tooltip, Typography, useTheme as useTheme2 } from "@mui/material";
+import { isDefined } from "@xylabs/typeof";
+import React2, { useMemo } from "react";
+var DetailsStack = /* @__PURE__ */ __name(({ IconComponent, heading, children, tooltipTitle, ...props }) => {
+  const theme = useTheme2();
+  const hasTooltip = isDefined(tooltipTitle);
+  const resolvedIconComponent = useMemo(() => {
+    return IconComponent ? /* @__PURE__ */ React2.createElement(IconComponent, {
+      style: {
+        /** height and marginTop adjusted to account for font not filling container with line-height: 1 */
+        height: "0.85rem",
+        marginTop: 0.5,
+        marginLeft: theme.spacing(1)
+      }
+    }) : /* @__PURE__ */ React2.createElement(React2.Fragment, null);
+  }, [
+    IconComponent
+  ]);
+  return /* @__PURE__ */ React2.createElement(Stack, {
+    direction: "column",
+    flexGrow: 1,
+    flexWrap: "wrap",
+    minWidth: "1px",
+    ...props
+  }, /* @__PURE__ */ React2.createElement(SectionHeadingTypography, null, heading, hasTooltip ? /* @__PURE__ */ React2.createElement(Tooltip, {
+    title: tooltipTitle
+  }, resolvedIconComponent) : resolvedIconComponent), children);
+}, "DetailsStack");
+var SectionHeadingTypography = styled2(Typography, {
+  name: "SectionHeadingTypography"
+})(({ theme }) => ({
+  display: "flex",
+  fontFamily: "monospace",
+  lineHeight: 1,
+  marginBottom: theme.spacing(1.5)
+}));
+
+// src/components/stack/LabelValueStack.tsx
+import { Stack as Stack2, Typography as Typography2, useTheme as useTheme3 } from "@mui/material";
+import React3 from "react";
+var LabelValueStack = /* @__PURE__ */ __name(({ labels, values, ...props }) => {
+  const theme = useTheme3();
+  return /* @__PURE__ */ React3.createElement(Stack2, {
+    flexDirection: "row",
+    flexGrow: 1,
+    ...props
+  }, /* @__PURE__ */ React3.createElement(Stack2, null, labels.map((label) => /* @__PURE__ */ React3.createElement(Typography2, {
+    fontWeight: "300",
+    key: label,
+    variant: "body2",
+    sx: {
+      borderBottom: `1px solid ${theme.vars?.palette.divider}`,
+      opacity: 0.7
+    }
+  }, label, ":"))), /* @__PURE__ */ React3.createElement(Stack2, {
+    alignItems: "end",
+    flexGrow: 1
+  }, values.map((value, index) => /* @__PURE__ */ React3.createElement(Typography2, {
+    fontFamily: "monospace",
+    variant: "body2",
+    // Use matching label as key since values might be the same
+    key: labels[index],
+    width: "100%",
+    sx: {
+      display: "flex",
+      justifyContent: "end",
+      borderBottom: `1px solid ${theme.vars?.palette.divider}`
+    }
+  }, value))));
+}, "LabelValueStack");
+
 // src/story/buildRandomBlockchain.ts
 import { Account } from "@xyo-network/account";
 import { buildRandomChain } from "@xyo-network/chain-protocol";
@@ -52,6 +124,8 @@ var buildRandomBlockChainBlocksOnly = /* @__PURE__ */ __name(async (blockCount =
 }, "buildRandomBlockChainBlocksOnly");
 export {
   ActiveMenuItem,
+  DetailsStack,
+  LabelValueStack,
   buildRandomBlockChain,
   buildRandomBlockChainBlocksOnly
 };

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/menu-item/ActiveMenuItem.tsx","../../src/story/buildRandomBlockchain.ts"],"sourcesContent":["import type { MenuItemProps } from '@mui/material'\nimport {\n  MenuItem, styled, useTheme,\n} from '@mui/material'\nimport React from 'react'\n\nexport const ActiveMenuItem: React.FC<MenuItemProps & { active?: boolean }> = ({\n  active, children, sx, ...props\n}) => {\n  const theme = useTheme()\n  return (\n    <StyledMenuItem\n      disableRipple\n      sx={{\n        // left border color and background color for active state\n        'borderLeft': `5px solid ${active ? theme.vars.palette.secondary.light : 'transparent'}`,\n        'backgroundColor': active ? theme.vars.palette.secondary.dark : 'transparent',\n        // force white text color for active state for improved readability with background color\n        'color': active ? 'white' : 'unset',\n        '&:hover': {\n          // overriding default hover color and backgroundColor since active state conflicts visually with\n          // default styles of MenuItem hover\n          ...(active ? { backgroundColor: theme.vars.palette.secondary.dark } : {}),\n          color: active ? 'white' : 'unset',\n        },\n        ...sx,\n      }}\n      {...props}\n    >\n      {children}\n    </StyledMenuItem>\n  )\n}\n\nconst StyledMenuItem = styled(MenuItem, { name: 'StyledMenuItem' })(({ theme }) => ({\n  display: 'flex-inline',\n  flexDirection: 'row',\n  gap: theme.spacing(1),\n  padding: 0,\n  paddingLeft: theme.spacing(1),\n  marginBottom: theme.spacing(1),\n}))\n","import { Account } from '@xyo-network/account'\nimport { buildRandomChain } from '@xyo-network/chain-protocol'\nimport type { HydratedBlock } from '@xyo-network/xl1-protocol'\n\nexport const buildRandomBlockChain = async (blockCount = 10) => {\n  // Create a producer\n  const initialBlockProducer = await Account.random()\n\n  // Create multiple blocks\n  const blocks: HydratedBlock[] = await buildRandomChain(initialBlockProducer, blockCount)\n  return blocks\n}\n\nexport const buildRandomBlockChainBlocksOnly = async (blockCount = 10) => {\n  const chain = await buildRandomChain(await Account.random(), blockCount)\n  return chain\n}\n"],"mappings":";;;;AACA,SACEA,UAAUC,QAAQC,gBACb;AACP,OAAOC,WAAW;AAEX,IAAMC,iBAAiE,wBAAC,EAC7EC,QAAQC,UAAUC,IAAI,GAAGC,MAAAA,MAC1B;AACC,QAAMC,QAAQC,SAAAA;AACd,SACE,sBAAA,cAACC,gBAAAA;IACCC,eAAAA;IACAL,IAAI;;MAEF,cAAc,aAAaF,SAASI,MAAMI,KAAKC,QAAQC,UAAUC,QAAQ,aAAA;MACzE,mBAAmBX,SAASI,MAAMI,KAAKC,QAAQC,UAAUE,OAAO;;MAEhE,SAASZ,SAAS,UAAU;MAC5B,WAAW;;;QAGT,GAAIA,SAAS;UAAEa,iBAAiBT,MAAMI,KAAKC,QAAQC,UAAUE;QAAK,IAAI,CAAC;QACvEE,OAAOd,SAAS,UAAU;MAC5B;MACA,GAAGE;IACL;IACC,GAAGC;KAEHF,QAAAA;AAGP,GA1B8E;AA4B9E,IAAMK,iBAAiBS,OAAOC,UAAU;EAAEC,MAAM;AAAiB,CAAA,EAAG,CAAC,EAAEb,MAAK,OAAQ;EAClFc,SAAS;EACTC,eAAe;EACfC,KAAKhB,MAAMiB,QAAQ,CAAA;EACnBC,SAAS;EACTC,aAAanB,MAAMiB,QAAQ,CAAA;EAC3BG,cAAcpB,MAAMiB,QAAQ,CAAA;AAC9B,EAAA;;;ACzCA,SAASI,eAAe;AACxB,SAASC,wBAAwB;AAG1B,IAAMC,wBAAwB,8BAAOC,aAAa,OAAE;AAEzD,QAAMC,uBAAuB,MAAMC,QAAQC,OAAM;AAGjD,QAAMC,SAA0B,MAAMC,iBAAiBJ,sBAAsBD,UAAAA;AAC7E,SAAOI;AACT,GAPqC;AAS9B,IAAME,kCAAkC,8BAAON,aAAa,OAAE;AACnE,QAAMO,QAAQ,MAAMF,iBAAiB,MAAMH,QAAQC,OAAM,GAAIH,UAAAA;AAC7D,SAAOO;AACT,GAH+C;","names":["MenuItem","styled","useTheme","React","ActiveMenuItem","active","children","sx","props","theme","useTheme","StyledMenuItem","disableRipple","vars","palette","secondary","light","dark","backgroundColor","color","styled","MenuItem","name","display","flexDirection","gap","spacing","padding","paddingLeft","marginBottom","Account","buildRandomChain","buildRandomBlockChain","blockCount","initialBlockProducer","Account","random","blocks","buildRandomChain","buildRandomBlockChainBlocksOnly","chain"]}
+{"version":3,"sources":["../../src/components/menu-item/ActiveMenuItem.tsx","../../src/components/stack/DetailsStack.tsx","../../src/components/stack/LabelValueStack.tsx","../../src/story/buildRandomBlockchain.ts"],"sourcesContent":["import type { MenuItemProps } from '@mui/material'\nimport {\n  MenuItem, styled, useTheme,\n} from '@mui/material'\nimport React from 'react'\n\nexport const ActiveMenuItem: React.FC<MenuItemProps & { active?: boolean }> = ({\n  active, children, sx, ...props\n}) => {\n  const theme = useTheme()\n  return (\n    <StyledMenuItem\n      disableRipple\n      sx={{\n        // left border color and background color for active state\n        'borderLeft': `5px solid ${active ? theme.vars.palette.secondary.light : 'transparent'}`,\n        'backgroundColor': active ? theme.vars.palette.secondary.dark : 'transparent',\n        // force white text color for active state for improved readability with background color\n        'color': active ? 'white' : 'unset',\n        '&:hover': {\n          // overriding default hover color and backgroundColor since active state conflicts visually with\n          // default styles of MenuItem hover\n          ...(active ? { backgroundColor: theme.vars.palette.secondary.dark } : {}),\n          color: active ? 'white' : 'unset',\n        },\n        ...sx,\n      }}\n      {...props}\n    >\n      {children}\n    </StyledMenuItem>\n  )\n}\n\nconst StyledMenuItem = styled(MenuItem, { name: 'StyledMenuItem' })(({ theme }) => ({\n  display: 'flex-inline',\n  flexDirection: 'row',\n  gap: theme.spacing(1),\n  padding: 0,\n  paddingLeft: theme.spacing(1),\n  marginBottom: theme.spacing(1),\n}))\n","import type { StackProps } from '@mui/material'\nimport {\n  Stack, styled, Tooltip, Typography,\n  useTheme,\n} from '@mui/material'\nimport { isDefined } from '@xylabs/typeof'\nimport type { ComponentType, SVGAttributes } from 'react'\nimport React, { useMemo } from 'react'\n\nexport interface DetailsStackProps extends StackProps {\n  IconComponent?: ComponentType<SVGAttributes<SVGElement>>\n  heading?: string\n  tooltipTitle?: string\n}\n\nexport const DetailsStack: React.FC<DetailsStackProps> = ({\n  IconComponent, heading, children, tooltipTitle, ...props\n}) => {\n  const theme = useTheme()\n\n  const hasTooltip = isDefined(tooltipTitle)\n  const resolvedIconComponent = useMemo(() => {\n    return IconComponent\n      ? (\n          <IconComponent\n            style={{\n              /** height and marginTop adjusted to account for font not filling container with line-height: 1 */\n              height: '0.85rem',\n              marginTop: 0.5,\n              marginLeft: theme.spacing(1),\n            }}\n          />\n        )\n      : <></>\n  }, [IconComponent])\n\n  return (\n    <Stack direction=\"column\" flexGrow={1} flexWrap=\"wrap\" minWidth=\"1px\" {...props}>\n      <SectionHeadingTypography>\n        {heading}\n        {hasTooltip\n          ? (\n              <Tooltip title={tooltipTitle}>\n                {resolvedIconComponent}\n              </Tooltip>\n            )\n          : resolvedIconComponent}\n      </SectionHeadingTypography>\n      {children}\n    </Stack>\n  )\n}\n\nconst SectionHeadingTypography = styled(Typography, { name: 'SectionHeadingTypography' })(({ theme }) => ({\n  display: 'flex',\n  fontFamily: 'monospace',\n  lineHeight: 1,\n  marginBottom: theme.spacing(1.5),\n}))\n","import type { StackProps } from '@mui/material'\nimport {\n  Stack, Typography, useTheme,\n} from '@mui/material'\nimport React from 'react'\n\nexport interface LabelValueStackProps extends StackProps {\n  labels: string[]\n  values: (string | undefined)[]\n}\n\nexport const LabelValueStack: React.FC<LabelValueStackProps> = ({\n  labels, values, ...props\n}) => {\n  const theme = useTheme()\n\n  return (\n    <Stack flexDirection=\"row\" flexGrow={1} {...props}>\n      <Stack>\n        {labels.map(label => (\n          <Typography\n            fontWeight=\"300\"\n            key={label}\n            variant=\"body2\"\n            sx={{ borderBottom: `1px solid ${theme.vars?.palette.divider}`, opacity: 0.7 }}\n          >\n            {label}\n            :\n          </Typography>\n        ))}\n      </Stack>\n      <Stack alignItems=\"end\" flexGrow={1}>\n        {values.map((value, index) => (\n          <Typography\n            fontFamily=\"monospace\"\n            variant=\"body2\"\n            // Use matching label as key since values might be the same\n            key={labels[index]}\n            width=\"100%\"\n            sx={{\n              display: 'flex', justifyContent: 'end', borderBottom: `1px solid ${theme.vars?.palette.divider}`,\n            }}\n          >\n            {value}\n          </Typography>\n        ))}\n      </Stack>\n    </Stack>\n  )\n}\n","import { Account } from '@xyo-network/account'\nimport { buildRandomChain } from '@xyo-network/chain-protocol'\nimport type { HydratedBlock } from '@xyo-network/xl1-protocol'\n\nexport const buildRandomBlockChain = async (blockCount = 10) => {\n  // Create a producer\n  const initialBlockProducer = await Account.random()\n\n  // Create multiple blocks\n  const blocks: HydratedBlock[] = await buildRandomChain(initialBlockProducer, blockCount)\n  return blocks\n}\n\nexport const buildRandomBlockChainBlocksOnly = async (blockCount = 10) => {\n  const chain = await buildRandomChain(await Account.random(), blockCount)\n  return chain\n}\n"],"mappings":"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","names":["MenuItem","styled","useTheme","React","ActiveMenuItem","active","children","sx","props","theme","useTheme","StyledMenuItem","disableRipple","vars","palette","secondary","light","dark","backgroundColor","color","styled","MenuItem","name","display","flexDirection","gap","spacing","padding","paddingLeft","marginBottom","Stack","styled","Tooltip","Typography","useTheme","isDefined","React","useMemo","DetailsStack","IconComponent","heading","children","tooltipTitle","props","theme","useTheme","hasTooltip","isDefined","resolvedIconComponent","useMemo","React","style","height","marginTop","marginLeft","spacing","Stack","direction","flexGrow","flexWrap","minWidth","SectionHeadingTypography","Tooltip","title","styled","Typography","name","display","fontFamily","lineHeight","marginBottom","Stack","Typography","useTheme","React","LabelValueStack","labels","values","props","theme","useTheme","React","Stack","flexDirection","flexGrow","map","label","Typography","fontWeight","key","variant","sx","borderBottom","vars","palette","divider","opacity","alignItems","value","index","fontFamily","width","display","justifyContent","Account","buildRandomChain","buildRandomBlockChain","blockCount","initialBlockProducer","Account","random","blocks","buildRandomChain","buildRandomBlockChainBlocksOnly","chain"]}

package/dist/types/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './menu-item/index.ts';
+export * from './stack/index.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA"}

package/dist/types/components/stack/DetailsStack.d.ts

@@ -0,0 +1,10 @@
+import type { StackProps } from '@mui/material';
+import type { ComponentType, SVGAttributes } from 'react';
+import React from 'react';
+export interface DetailsStackProps extends StackProps {
+    IconComponent?: ComponentType<SVGAttributes<SVGElement>>;
+    heading?: string;
+    tooltipTitle?: string;
+}
+export declare const DetailsStack: React.FC<DetailsStackProps>;
+//# sourceMappingURL=DetailsStack.d.ts.map

package/dist/types/components/stack/DetailsStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsStack.d.ts","sourceRoot":"","sources":["../../../../src/components/stack/DetailsStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAM/C,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,aAAa,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAA;IACxD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoCpD,CAAA"}

package/dist/types/components/stack/LabelValueStack.d.ts

@@ -0,0 +1,8 @@
+import type { StackProps } from '@mui/material';
+import React from 'react';
+export interface LabelValueStackProps extends StackProps {
+    labels: string[];
+    values: (string | undefined)[];
+}
+export declare const LabelValueStack: React.FC<LabelValueStackProps>;
+//# sourceMappingURL=LabelValueStack.d.ts.map

package/dist/types/components/stack/LabelValueStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelValueStack.d.ts","sourceRoot":"","sources":["../../../../src/components/stack/LabelValueStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAI/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,MAAM,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAA;CAC/B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsC1D,CAAA"}

package/dist/types/components/stack/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DetailsStack.tsx';
+export * from './LabelValueStack.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/stack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/stack/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-shared",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "description": "XYO Layer One React SDK",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@xyo-network/account": "^3.18.0",
-    "@xyo-network/chain-protocol": "^1.5.7",
+    "@xyo-network/chain-protocol": "^1.5.9",
     "@xyo-network/xl1-protocol": "^1.4.14"
   },
   "devDependencies": {

package/src/components/index.ts

@@ -1 +1,2 @@
 export * from './menu-item/index.ts'
+export * from './stack/index.ts'

package/src/components/stack/DetailsStack.tsx

@@ -0,0 +1,59 @@
+import type { StackProps } from '@mui/material'
+import {
+  Stack, styled, Tooltip, Typography,
+  useTheme,
+} from '@mui/material'
+import { isDefined } from '@xylabs/typeof'
+import type { ComponentType, SVGAttributes } from 'react'
+import React, { useMemo } from 'react'
+
+export interface DetailsStackProps extends StackProps {
+  IconComponent?: ComponentType<SVGAttributes<SVGElement>>
+  heading?: string
+  tooltipTitle?: string
+}
+
+export const DetailsStack: React.FC<DetailsStackProps> = ({
+  IconComponent, heading, children, tooltipTitle, ...props
+}) => {
+  const theme = useTheme()
+
+  const hasTooltip = isDefined(tooltipTitle)
+  const resolvedIconComponent = useMemo(() => {
+    return IconComponent
+      ? (
+          <IconComponent
+            style={{
+              /** height and marginTop adjusted to account for font not filling container with line-height: 1 */
+              height: '0.85rem',
+              marginTop: 0.5,
+              marginLeft: theme.spacing(1),
+            }}
+          />
+        )
+      : <></>
+  }, [IconComponent])
+
+  return (
+    <Stack direction="column" flexGrow={1} flexWrap="wrap" minWidth="1px" {...props}>
+      <SectionHeadingTypography>
+        {heading}
+        {hasTooltip
+          ? (
+              <Tooltip title={tooltipTitle}>
+                {resolvedIconComponent}
+              </Tooltip>
+            )
+          : resolvedIconComponent}
+      </SectionHeadingTypography>
+      {children}
+    </Stack>
+  )
+}
+
+const SectionHeadingTypography = styled(Typography, { name: 'SectionHeadingTypography' })(({ theme }) => ({
+  display: 'flex',
+  fontFamily: 'monospace',
+  lineHeight: 1,
+  marginBottom: theme.spacing(1.5),
+}))

package/src/components/stack/LabelValueStack.tsx

@@ -0,0 +1,50 @@
+import type { StackProps } from '@mui/material'
+import {
+  Stack, Typography, useTheme,
+} from '@mui/material'
+import React from 'react'
+
+export interface LabelValueStackProps extends StackProps {
+  labels: string[]
+  values: (string | undefined)[]
+}
+
+export const LabelValueStack: React.FC<LabelValueStackProps> = ({
+  labels, values, ...props
+}) => {
+  const theme = useTheme()
+
+  return (
+    <Stack flexDirection="row" flexGrow={1} {...props}>
+      <Stack>
+        {labels.map(label => (
+          <Typography
+            fontWeight="300"
+            key={label}
+            variant="body2"
+            sx={{ borderBottom: `1px solid ${theme.vars?.palette.divider}`, opacity: 0.7 }}
+          >
+            {label}
+            :
+          </Typography>
+        ))}
+      </Stack>
+      <Stack alignItems="end" flexGrow={1}>
+        {values.map((value, index) => (
+          <Typography
+            fontFamily="monospace"
+            variant="body2"
+            // Use matching label as key since values might be the same
+            key={labels[index]}
+            width="100%"
+            sx={{
+              display: 'flex', justifyContent: 'end', borderBottom: `1px solid ${theme.vars?.palette.divider}`,
+            }}
+          >
+            {value}
+          </Typography>
+        ))}
+      </Stack>
+    </Stack>
+  )
+}

package/src/components/stack/index.ts

@@ -0,0 +1,2 @@
+export * from './DetailsStack.tsx'
+export * from './LabelValueStack.tsx'