@xyo-network/react-chain-shared 1.14.0 → 1.14.2

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.
Files changed (5) hide show
  1. package/dist/browser/components/stack/LabelValueStack.d.ts.map +1 -1
  2. package/dist/browser/index.mjs +10 -1
  3. package/dist/browser/index.mjs.map +1 -1
  4. package/package.json +6 -4
  5. package/src/components/stack/LabelValueStack.tsx +10 -2
package/dist/browser/components/stack/LabelValueStack.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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;AAM/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,CA4C1D,CAAA"}
package/dist/browser/index.mjs CHANGED
@@ -79,9 +79,17 @@ var SectionHeadingTypography = styled2(Typography, {
79
79
 
80
80
  // src/components/stack/LabelValueStack.tsx
81
81
  import { Stack as Stack2, Typography as Typography2, useTheme as useTheme3 } from "@mui/material";
82
+ import { ellipsize } from "@xylabs/eth-address";
83
+ import { isAddress } from "@xylabs/hex";
82
84
  import React3 from "react";
83
85
  var LabelValueStack = /* @__PURE__ */ __name(({ labels, values, ...props }) => {
84
86
  const theme = useTheme3();
87
+ const formattedValue = /* @__PURE__ */ __name((value) => {
88
+ if (isAddress(value)) {
89
+ return ellipsize(value, 8);
90
+ }
91
+ return value;
92
+ }, "formattedValue");
85
93
  return /* @__PURE__ */ React3.createElement(Stack2, {
86
94
  flexDirection: "row",
87
95
  flexGrow: 1,
@@ -98,6 +106,7 @@ var LabelValueStack = /* @__PURE__ */ __name(({ labels, values, ...props }) => {
98
106
  alignItems: "end",
99
107
  flexGrow: 1
100
108
  }, values.map((value, index) => /* @__PURE__ */ React3.createElement(Typography2, {
109
+ title: value,
101
110
  fontFamily: "monospace",
102
111
  variant: "body2",
103
112
  // Use matching label as key since values might be the same
@@ -108,7 +117,7 @@ var LabelValueStack = /* @__PURE__ */ __name(({ labels, values, ...props }) => {
108
117
  justifyContent: "end",
109
118
  borderBottom: `1px solid ${theme.vars?.palette.divider}`
110
119
  }
111
- }, value))));
120
+ }, formattedValue(value)))));
112
121
  }, "LabelValueStack");
113
122
 
114
123
  // src/story/buildRandomBlockchain.ts
package/dist/browser/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"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 {\n ComponentType, ReactNode, SVGAttributes,\n} from 'react'\nimport React, { Fragment, useMemo } from 'react'\n\nconst isComponentType = (value: unknown): value is ComponentType<SVGAttributes<SVGElement>> =>\n typeof value === 'function'\n || (typeof value === 'object' && value !== null && ('$$typeof' in value || 'render' in value))\n\nexport interface DetailsStackProps extends StackProps {\n IconComponent?: ComponentType<SVGAttributes<SVGElement>> | ReactNode\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 isComponentType(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 : IconComponent ?? <Fragment />\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 <span>{resolvedIconComponent}</span>\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","Fragment","useMemo","isComponentType","value","DetailsStack","IconComponent","heading","children","tooltipTitle","props","theme","useTheme","hasTooltip","isDefined","resolvedIconComponent","useMemo","React","style","height","marginTop","marginLeft","spacing","Fragment","Stack","direction","flexGrow","flexWrap","minWidth","SectionHeadingTypography","Tooltip","title","span","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"]}
1
+ {"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 {\n ComponentType, ReactNode, SVGAttributes,\n} from 'react'\nimport React, { Fragment, useMemo } from 'react'\n\nconst isComponentType = (value: unknown): value is ComponentType<SVGAttributes<SVGElement>> =>\n typeof value === 'function'\n || (typeof value === 'object' && value !== null && ('$$typeof' in value || 'render' in value))\n\nexport interface DetailsStackProps extends StackProps {\n IconComponent?: ComponentType<SVGAttributes<SVGElement>> | ReactNode\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 isComponentType(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 : IconComponent ?? <Fragment />\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 <span>{resolvedIconComponent}</span>\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 { ellipsize } from '@xylabs/eth-address'\nimport { isAddress } from '@xylabs/hex'\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 const formattedValue = (value: string | undefined): string | undefined => {\n if (isAddress(value)) {\n return ellipsize(value, 8)\n }\n return value\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 title={value}\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 {formattedValue(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":";;;;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;;;ACxCA,SACEI,OAAOC,UAAAA,SAAQC,SAASC,YACxBC,YAAAA,iBACK;AACP,SAASC,iBAAiB;AAI1B,OAAOC,UAASC,UAAUC,eAAe;AAEzC,IAAMC,kBAAkB,wBAACC,UACvB,OAAOA,UAAU,cACb,OAAOA,UAAU,YAAYA,UAAU,SAAS,cAAcA,SAAS,YAAYA,QAFjE;AAUjB,IAAMC,eAA4C,wBAAC,EACxDC,eAAeC,SAASC,UAAUC,cAAc,GAAGC,MAAAA,MACpD;AACC,QAAMC,QAAQC,UAAAA;AAEd,QAAMC,aAAaC,UAAUL,YAAAA;AAC7B,QAAMM,wBAAwBC,QAAQ,MAAA;AACpC,WAAOb,gBAAgBG,aAAAA,IAEjB,gBAAAW,OAAA,cAACX,eAAAA;MACCY,OAAO;;QAELC,QAAQ;QACRC,WAAW;QACXC,YAAYV,MAAMW,QAAQ,CAAA;MAC5B;SAGJhB,iBAAiB,gBAAAW,OAAA,cAACM,UAAAA,IAAAA;EACxB,GAAG;IAACjB;GAAc;AAElB,SACE,gBAAAW,OAAA,cAACO,OAAAA;IAAMC,WAAU;IAASC,UAAU;IAAGC,UAAS;IAAOC,UAAS;IAAO,GAAGlB;KACxE,gBAAAO,OAAA,cAACY,0BAAAA,MACEtB,SACAM,aAEK,gBAAAI,OAAA,cAACa,SAAAA;IAAQC,OAAOtB;KACd,gBAAAQ,OAAA,cAACe,QAAAA,MAAMjB,qBAAAA,CAAAA,IAGXA,qBAAAA,GAELP,QAAAA;AAGP,GApCyD;AAsCzD,IAAMqB,2BAA2BI,QAAOC,YAAY;EAAEC,MAAM;AAA2B,CAAA,EAAG,CAAC,EAAExB,MAAK,OAAQ;EACxGyB,SAAS;EACTC,YAAY;EACZC,YAAY;EACZC,cAAc5B,MAAMW,QAAQ,GAAA;AAC9B,EAAA;;;AC/DA,SACEkB,SAAAA,QAAOC,cAAAA,aAAYC,YAAAA,iBACd;AACP,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAC1B,OAAOC,YAAW;AAOX,IAAMC,kBAAkD,wBAAC,EAC9DC,QAAQC,QAAQ,GAAGC,MAAAA,MACpB;AACC,QAAMC,QAAQC,UAAAA;AACd,QAAMC,iBAAiB,wBAACC,UAAAA;AACtB,QAAIC,UAAUD,KAAAA,GAAQ;AACpB,aAAOE,UAAUF,OAAO,CAAA;IAC1B;AACA,WAAOA;EACT,GALuB;AAMvB,SACE,gBAAAG,OAAA,cAACC,QAAAA;IAAMC,eAAc;IAAMC,UAAU;IAAI,GAAGV;KAC1C,gBAAAO,OAAA,cAACC,QAAAA,MACEV,OAAOa,IAAIC,CAAAA,UACV,gBAAAL,OAAA,cAACM,aAAAA;IACCC,YAAW;IACXC,KAAKH;IACLI,SAAQ;IACRC,IAAI;MAAEC,cAAc,aAAajB,MAAMkB,MAAMC,QAAQC,OAAAA;MAAWC,SAAS;IAAI;KAE5EV,OAAM,GAAA,CAAA,CAAA,GAKb,gBAAAL,OAAA,cAACC,QAAAA;IAAMe,YAAW;IAAMb,UAAU;KAC/BX,OAAOY,IAAI,CAACP,OAAOoB,UAClB,gBAAAjB,OAAA,cAACM,aAAAA;IACCY,OAAOrB;IACPsB,YAAW;IACXV,SAAQ;;IAERD,KAAKjB,OAAO0B,KAAAA;IACZG,OAAM;IACNV,IAAI;MACFW,SAAS;MAAQC,gBAAgB;MAAOX,cAAc,aAAajB,MAAMkB,MAAMC,QAAQC,OAAAA;IACzF;KAEClB,eAAeC,KAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAM5B,GA5C+D;;;ACb/D,SAAS0B,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","Stack","styled","Tooltip","Typography","useTheme","isDefined","React","Fragment","useMemo","isComponentType","value","DetailsStack","IconComponent","heading","children","tooltipTitle","props","theme","useTheme","hasTooltip","isDefined","resolvedIconComponent","useMemo","React","style","height","marginTop","marginLeft","spacing","Fragment","Stack","direction","flexGrow","flexWrap","minWidth","SectionHeadingTypography","Tooltip","title","span","styled","Typography","name","display","fontFamily","lineHeight","marginBottom","Stack","Typography","useTheme","ellipsize","isAddress","React","LabelValueStack","labels","values","props","theme","useTheme","formattedValue","value","isAddress","ellipsize","React","Stack","flexDirection","flexGrow","map","label","Typography","fontWeight","key","variant","sx","borderBottom","vars","palette","divider","opacity","alignItems","index","title","fontFamily","width","display","justifyContent","Account","buildRandomChain","buildRandomBlockChain","blockCount","initialBlockProducer","Account","random","blocks","buildRandomChain","buildRandomBlockChainBlocksOnly","chain"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "http://json.schemastore.org/package.json",
3
3
  "name": "@xyo-network/react-chain-shared",
4
- "version": "1.14.0",
4
+ "version": "1.14.2",
5
5
  "description": "XYO Layer One React SDK",
6
6
  "homepage": "https://xylabs.com",
7
7
  "bugs": {
@@ -45,15 +45,17 @@
45
45
  "start": "storybook dev -p 6006"
46
46
  },
47
47
  "dependencies": {
48
+ "@xylabs/eth-address": "~5.0.11",
49
+ "@xylabs/hex": "~5.0.11",
48
50
  "@xylabs/typeof": "~5.0.11",
49
51
  "@xyo-network/account": "~5.1.0",
50
- "@xyo-network/chain-protocol": "~1.14.0",
51
- "@xyo-network/xl1-protocol": "~1.11.0"
52
+ "@xyo-network/chain-protocol": "~1.14.2",
53
+ "@xyo-network/xl1-protocol": "~1.12.14"
52
54
  },
53
55
  "devDependencies": {
54
56
  "@emotion/react": "~11.14.0",
55
57
  "@emotion/styled": "~11.14.1",
56
- "@mui/material": "~7.3.1",
58
+ "@mui/material": "~7.3.2",
57
59
  "@types/react": "~19.1.12",
58
60
  "@xylabs/ts-scripts-yarn3": "~7.1.7",
59
61
  "@xylabs/tsconfig": "~7.1.7",
package/src/components/stack/LabelValueStack.tsx CHANGED
@@ -2,6 +2,8 @@ import type { StackProps } from '@mui/material'
2
2
  import {
3
3
  Stack, Typography, useTheme,
4
4
  } from '@mui/material'
5
+ import { ellipsize } from '@xylabs/eth-address'
6
+ import { isAddress } from '@xylabs/hex'
5
7
  import React from 'react'
6
8
 
7
9
  export interface LabelValueStackProps extends StackProps {
@@ -13,7 +15,12 @@ export const LabelValueStack: React.FC<LabelValueStackProps> = ({
13
15
  labels, values, ...props
14
16
  }) => {
15
17
  const theme = useTheme()
16
-
18
+ const formattedValue = (value: string | undefined): string | undefined => {
19
+ if (isAddress(value)) {
20
+ return ellipsize(value, 8)
21
+ }
22
+ return value
23
+ }
17
24
  return (
18
25
  <Stack flexDirection="row" flexGrow={1} {...props}>
19
26
  <Stack>
@@ -32,6 +39,7 @@ export const LabelValueStack: React.FC<LabelValueStackProps> = ({
32
39
  <Stack alignItems="end" flexGrow={1}>
33
40
  {values.map((value, index) => (
34
41
  <Typography
42
+ title={value}
35
43
  fontFamily="monospace"
36
44
  variant="body2"
37
45
  // Use matching label as key since values might be the same
@@ -41,7 +49,7 @@ export const LabelValueStack: React.FC<LabelValueStackProps> = ({
41
49
  display: 'flex', justifyContent: 'end', borderBottom: `1px solid ${theme.vars?.palette.divider}`,
42
50
  }}
43
51
  >
44
- {value}
52
+ {formattedValue(value)}
45
53
  </Typography>
46
54
  ))}
47
55
  </Stack>