@xyo-network/react-payload-details 2.32.0-rc.11

package/dist/esm/components/Details/DataDetails.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { XyoPayload } from '@xyo-network/payload';
+import { PropertyProps } from '@xyo-network/react-property';
+import { SizeProp } from '@xyo-network/react-shared';
+export declare type PayloadDataDetailsProps = PropertyProps & {
+    payload?: XyoPayload;
+    size?: SizeProp;
+    badge?: boolean;
+};
+export declare const PayloadDataDetails: React.FC<PayloadDataDetailsProps>;
+//# sourceMappingURL=DataDetails.d.ts.map

package/dist/esm/components/Details/DataDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/DataDetails.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;AACpE,OAAO,EAA4B,aAAa,EAAE,MAAM,6BAA6B,CAAA;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AAKpD,oBAAY,uBAAuB,GAAG,aAAa,GAAG;IACpD,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAwDhE,CAAA"}

package/dist/esm/components/Details/DataDetails.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import { ButtonEx } from '@xylabs/react-button';
+import { XyoPayloadWrapper } from '@xyo-network/payload';
+import { Property } from '@xyo-network/react-property';
+import { useState } from 'react';
+import { PayloadHashSourceDetails } from './HashSourceDetails';
+export const PayloadDataDetails = ({ size, badge, payload, ...props }) => {
+    const wrapper = payload ? new XyoPayloadWrapper(payload) : undefined;
+    const [viewSourceOpen, setViewSourceOpen] = useState(false);
+    const hash = wrapper?.hash;
+    let elevation = 2;
+    if (props.paper) {
+        elevation += props.elevation ?? 0;
+    }
+    const actions = [
+        {
+            icon: _jsx(VisibilityIcon, {}),
+            name: 'View',
+            onClick: () => setViewSourceOpen(true),
+        },
+        {
+            icon: _jsx(ContentCopyIcon, {}),
+            name: 'Copy',
+            onClick: async () => await navigator.clipboard.writeText(wrapper?.hash ?? ''),
+        },
+    ];
+    const onCopy = async () => {
+        await navigator.clipboard.writeText(wrapper?.stringified ?? '');
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Property, { titleProps: { elevation }, badge: badge, size: size, actions: actions, title: "Payload Hash", value: hash ?? '<Unknown>', tip: "This is the payload hash", ...props }), _jsxs(Dialog, { open: viewSourceOpen, onClose: () => setViewSourceOpen(false), children: [_jsx(DialogTitle, { children: "Hash Source" }), _jsx(DialogContent, { children: _jsx(PayloadHashSourceDetails, { noTitle: true, payload: payload }) }), _jsxs(DialogActions, { children: [_jsx(ButtonEx, { color: "secondary", onClick: onCopy, children: "Copy" }), _jsx(ButtonEx, { color: "secondary", onClick: () => setViewSourceOpen(false), children: "Close" })] })] })] }));
+};
+//# sourceMappingURL=DataDetails.js.map

package/dist/esm/components/Details/DataDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/DataDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,MAAM,iCAAiC,CAAA;AAC7D,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAc,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,EAAE,QAAQ,EAAiC,MAAM,6BAA6B,CAAA;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAQ9D,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1G,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEpE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3D,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,CAAA;IAE1B,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,CAAA;KAClC;IAED,MAAM,OAAO,GAAqB;QAChC;YACE,IAAI,EAAE,KAAC,cAAc,KAAG;YACxB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC;SACvC;QACD;YACE,IAAI,EAAE,KAAC,eAAe,KAAG;YACzB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,IAAI,EAAE,CAAC;SAC9E;KACF,CAAA;IAED,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE;QACxB,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,IAAI,EAAE,CAAC,CAAA;IACjE,CAAC,CAAA;IAED,OAAO,CACL,8BACE,KAAC,QAAQ,IACP,UAAU,EAAE,EAAE,SAAS,EAAE,EACzB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,IAAI,IAAI,WAAW,EAC1B,GAAG,EAAC,0BAA0B,KAC1B,KAAK,GACT,EACF,MAAC,MAAM,IAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,aACnE,KAAC,WAAW,8BAA0B,EACtC,KAAC,aAAa,cACZ,KAAC,wBAAwB,IAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,GACxC,EAChB,MAAC,aAAa,eACZ,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,qBAEhC,EACX,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,sBAExD,IACG,IACT,IACR,CACJ,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Details/Details.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { XyoPayload } from '@xyo-network/payload';
+export declare type WithPaper<T> = T & {
+    paper: true;
+};
+export declare type WithoutPaper<T> = T & {
+    paper?: false;
+};
+export declare type PayloadDetailsProps = FlexBoxProps & {
+    payload?: XyoPayload;
+    paper?: boolean;
+};
+export declare const PayloadDetails: React.FC<PayloadDetailsProps>;
+//# sourceMappingURL=Details.d.ts.map

package/dist/esm/components/Details/Details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAMjD,oBAAY,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,EAAE,IAAI,CAAA;CAAE,CAAA;AAC9C,oBAAY,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAEnD,oBAAY,mBAAmB,GAAG,YAAY,GAAG;IAC/C,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAQxD,CAAA"}

package/dist/esm/components/Details/Details.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FlexCol } from '@xylabs/react-flexbox';
+import { PayloadDataDetails } from './DataDetails';
+import { PayloadJsonDetails } from './JsonDetails';
+import { PayloadValidationDetails } from './ValidationDetails';
+export const PayloadDetails = ({ paper, payload, ...props }) => {
+    return (_jsxs(FlexCol, { gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ...props, children: [_jsx(PayloadDataDetails, { paper: paper, size: "large", badge: true, payload: payload }), _jsx(PayloadValidationDetails, { paper: paper, value: payload }), _jsx(PayloadJsonDetails, { paper: paper, payload: payload })] }));
+};
+//# sourceMappingURL=Details.js.map

package/dist/esm/components/Details/Details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAG7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAU9D,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5F,OAAO,CACL,MAAC,OAAO,IAAC,GAAG,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,KAAM,KAAK,aACxG,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,QAAC,OAAO,EAAE,OAAO,GAAI,EACzE,KAAC,wBAAwB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAI,EAC1D,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,IAC9C,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Details/HashSourceDetails.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { XyoPayload } from '@xyo-network/payload';
+export interface PayloadHashSourceDetailsProps extends FlexBoxProps {
+    noTitle?: boolean;
+    payload?: XyoPayload;
+}
+export declare const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps>;
+//# sourceMappingURL=HashSourceDetails.d.ts.map

package/dist/esm/components/Details/HashSourceDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HashSourceDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAiC,MAAM,uBAAuB,CAAA;AAEnF,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;AAEpE,MAAM,WAAW,6BAA8B,SAAQ,YAAY;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,UAAU,CAAA;CACrB;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA+B5E,CAAA"}

package/dist/esm/components/Details/HashSourceDetails.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { IconButton, Typography, useTheme } from '@mui/material';
+import { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox';
+import { QuickTipButton } from '@xylabs/react-quick-tip-button';
+import { XyoPayloadWrapper } from '@xyo-network/payload';
+export const PayloadHashSourceDetails = ({ noTitle = false, payload, ...props }) => {
+    const theme = useTheme();
+    const payloadWrapper = payload ? new XyoPayloadWrapper(payload) : null;
+    return (_jsxs(FlexCol, { alignItems: "stretch", ...props, children: [noTitle ? null : (_jsxs(FlexRow, { margin: 1, justifyContent: "flex-start", children: [_jsx(Typography, { children: "Hash Source" }), _jsx(QuickTipButton, { title: "Hash Source", children: "The actual string used to generate the hash (SHA256)" })] })), _jsxs(FlexRow, { children: [_jsx(FlexGrowRow, { background: true, border: 1, borderColor: theme.palette.divider, justifyContent: "start", children: _jsx(Typography, { padding: 2, fontFamily: "monospace", variant: "body1", sx: { overflowWrap: 'break-word', wordBreak: 'break-all' }, children: payloadWrapper?.stringified ?? '' }) }), _jsx(IconButton, { children: _jsx(ContentCopyIcon, {}) })] }), noTitle ? (_jsx(FlexRow, { margin: 1, justifyContent: "flex-start", children: _jsx(Typography, { variant: "body2", children: "The actual string used to generate the hash (SHA256). This can be used to validate the hash manually." }) })) : null] }));
+};
+//# sourceMappingURL=HashSourceDetails.js.map

package/dist/esm/components/Details/HashSourceDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HashSourceDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,MAAM,iCAAiC,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAc,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAOpE,MAAM,CAAC,MAAM,wBAAwB,GAA4C,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1H,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAEtE,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACpC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChB,MAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,aAC7C,KAAC,UAAU,8BAAyB,EACpC,KAAC,cAAc,IAAC,KAAK,EAAC,aAAa,qEAAsE,IACjG,CACX,EACD,MAAC,OAAO,eACN,KAAC,WAAW,IAAC,UAAU,QAAC,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,EAAC,OAAO,YAC3F,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,UAAU,EAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,YACtH,cAAc,EAAE,WAAW,IAAI,EAAE,GACvB,GACD,EACd,KAAC,UAAU,cACT,KAAC,eAAe,KAAG,GACR,IACL,EACT,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,YAC7C,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,sHAEd,GACL,CACX,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Details/JsonDetails.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { XyoPayload } from '@xyo-network/payload';
+import { PropertyGroupProps } from '@xyo-network/react-property';
+import { ReactJsonViewProps } from 'react-json-view';
+export declare type PayloadJsonDetailsProps = PropertyGroupProps & {
+    payload?: XyoPayload;
+    jsonViewProps?: ReactJsonViewProps;
+};
+export declare const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps>;
+//# sourceMappingURL=JsonDetails.d.ts.map

package/dist/esm/components/Details/JsonDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAE/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAIpD,oBAAY,uBAAuB,GAAG,kBAAkB,GAAG;IACzD,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA4BhE,CAAA"}

package/dist/esm/components/Details/JsonDetails.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Paper, useMediaQuery, useTheme } from '@mui/material';
+import { FlexGrowRow } from '@xylabs/react-flexbox';
+import { PropertyGroup } from '@xyo-network/react-property';
+import { lazy, Suspense } from 'react';
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'));
+export const PayloadJsonDetails = ({ jsonViewProps, payload = {}, ...props }) => {
+    const { breakpoints, palette } = useTheme();
+    const belowSm = useMediaQuery(breakpoints.down('sm'));
+    let elevation = 2;
+    if (props.paper) {
+        elevation += props.elevation ?? 0;
+    }
+    const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined;
+    return (_jsx(PropertyGroup, { titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload", ...props, children: _jsx(Paper, { square: true, variant: "elevation", style: { overflow: 'hidden', padding: '16px', width: '100%' }, children: _jsx(Suspense, { fallback: _jsx(FlexGrowRow, {}), children: _jsx(JsonView, { groupArraysAfterLength: 20, style: { backgroundColor: undefined, overflow: 'hidden' }, src: payload, enableClipboard: true, theme: jsonTheme, collapseStringsAfterLength: belowSm ? 24 : 32, ...jsonViewProps }) }) }) }));
+};
+//# sourceMappingURL=JsonDetails.js.map

package/dist/esm/components/Details/JsonDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,OAAO,EAAE,aAAa,EAAsB,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,kCAAkC,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAOzF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,aAAa,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjH,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC3C,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAErD,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,CAAA;KAClC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEtE,OAAO,CACL,KAAC,aAAa,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,KAAK,KAAK,YAChG,KAAC,KAAK,IAAC,MAAM,QAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAC7F,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,KAAG,YACjC,KAAC,QAAQ,IACP,sBAAsB,EAAE,EAAE,EAC1B,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACzD,GAAG,EAAE,OAAO,EACZ,eAAe,QACf,KAAK,EAAE,SAAS,EAChB,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KACzC,aAAa,GACjB,GACO,GACL,GACM,CACjB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Details/ValidationDetails/ValidationDetails.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PayloadValidationDetailsProps } from './ValidationDetailsProps';
+export declare const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps>;
+//# sourceMappingURL=ValidationDetails.d.ts.map

package/dist/esm/components/Details/ValidationDetails/ValidationDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationDetails.d.ts","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAA;AAExE,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAiC5E,CAAA"}

package/dist/esm/components/Details/ValidationDetails/ValidationDetails.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { FlexCol } from '@xylabs/react-flexbox';
+import { XyoPayloadValidator } from '@xyo-network/payload';
+import { Property, PropertyGroup } from '@xyo-network/react-property';
+import { SchemaProperty } from '@xyo-network/react-schema';
+export const PayloadValidationDetails = ({ viewSchemaUrl, skipBody = false, value, ...props }) => {
+    const validator = value ? new XyoPayloadValidator(value) : undefined;
+    const bodyErrors = skipBody ? [] : validator?.body.validate() ?? [];
+    const errors = [...bodyErrors];
+    let elevation = 2;
+    if (props.paper) {
+        elevation += props.elevation ?? 0;
+    }
+    return (_jsxs(PropertyGroup, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [_jsx(Property, { titleProps: { elevation }, flexGrow: 1, title: "Valid", value: errors.length === 0 ? 'True' : 'False', tip: errors.length > 0 ? (_jsx(FlexCol, { children: errors.map((error, index) => {
+                        return _jsx(Typography, { children: error.toString() }, index);
+                    }) })) : (_jsx(Typography, { children: "No Errors" })) }), value?.schema && _jsx(SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema, viewSchemaUrl: viewSchemaUrl })] }));
+};
+//# sourceMappingURL=ValidationDetails.js.map

package/dist/esm/components/Details/ValidationDetails/ValidationDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationDetails.js","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAI1D,MAAM,CAAC,MAAM,wBAAwB,GAA4C,CAAC,EAAE,aAAa,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxI,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEpE,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;IACnE,MAAM,MAAM,GAAY,CAAC,GAAG,UAAU,CAAC,CAAA;IAEvC,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,CAAA;KAClC;IAED,OAAO,CACL,MAAC,aAAa,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,YAAY,EAAC,GAAG,EAAC,yCAAyC,KAAK,KAAK,aAClH,KAAC,QAAQ,IACP,UAAU,EAAE,EAAE,SAAS,EAAE,EACzB,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,GAAG,EACD,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAClB,KAAC,OAAO,cACL,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;wBAC3B,OAAO,KAAC,UAAU,cAAc,KAAK,CAAC,QAAQ,EAAE,IAAxB,KAAK,CAAiC,CAAA;oBAChE,CAAC,CAAC,GACM,CACX,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,4BAAuB,CACnC,GAEH,EACD,KAAK,EAAE,MAAM,IAAI,KAAC,cAAc,IAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,aAAa,EAAE,aAAa,GAAI,IACjH,CACjB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Details/ValidationDetails/ValidationDetailsProps.d.ts

@@ -0,0 +1,8 @@
+import { XyoPayloadWithPartialMeta } from '@xyo-network/payload';
+import { PropertyGroupProps } from '@xyo-network/react-property';
+export declare type PayloadValidationDetailsProps = PropertyGroupProps & {
+    skipBody?: boolean;
+    value?: XyoPayloadWithPartialMeta;
+    viewSchemaUrl?: string;
+};
+//# sourceMappingURL=ValidationDetailsProps.d.ts.map

package/dist/esm/components/Details/ValidationDetails/ValidationDetailsProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationDetailsProps.d.ts","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetailsProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAEhE,oBAAY,6BAA6B,GAAG,kBAAkB,GAAG;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,yBAAyB,CAAA;IACjC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA"}

package/dist/esm/components/Details/ValidationDetails/ValidationDetailsProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationDetailsProps.js.map

package/dist/esm/components/Details/ValidationDetails/ValidationDetailsProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationDetailsProps.js","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetailsProps.ts"],"names":[],"mappings":""}

package/dist/esm/components/Details/ValidationDetails/index.d.ts

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

package/dist/esm/components/Details/ValidationDetails/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA"}

package/dist/esm/components/Details/ValidationDetails/index.js

@@ -0,0 +1,3 @@
+export * from './ValidationDetails';
+export * from './ValidationDetailsProps';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Details/ValidationDetails/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA"}

package/dist/esm/components/Details/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DataDetails';
+export * from './Details';
+export * from './JsonDetails';
+export * from './ValidationDetails';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Details/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA"}

package/dist/esm/components/Details/index.js

@@ -0,0 +1,5 @@
+export * from './DataDetails';
+export * from './Details';
+export * from './JsonDetails';
+export * from './ValidationDetails';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Details/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './Details';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './Details';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

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

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@xyo-network/react-payload-details",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-button": "^2.14.16",
+    "@xylabs/react-flexbox": "^2.14.16",
+    "@xylabs/react-quick-tip-button": "^2.14.16",
+    "@xyo-network/react-property": "^2.32.0-rc.11",
+    "@xyo-network/react-schema": "^2.32.0-rc.11",
+    "@xyo-network/react-shared": "^2.32.0-rc.11",
+    "react-json-view": "^1.21.3",
+    "tslib": "^2.4.0"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.3",
+    "@mui/styles": "^5.10.3",
+    "@xyo-network/api": "^2.30.0-rc.3",
+    "@xyo-network/payload": "^2.30.0-rc.3",
+    "@xyo-network/property": "^2.30.0-rc.3",
+    "@xyo-network/schema-payload-plugin": "^2.30.0-rc.3",
+    "@xyo-network/utils": "^2.30.0-rc.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/esm/index.d.ts",
+  "version": "2.32.0-rc.11",
+  "stableVersion": "2.31.2"
+}

package/src/components/Details/DataDetails.tsx

@@ -0,0 +1,74 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
+import { Property, PropertyAction, PropertyProps } from '@xyo-network/react-property'
+import { SizeProp } from '@xyo-network/react-shared'
+import { useState } from 'react'
+
+import { PayloadHashSourceDetails } from './HashSourceDetails'
+
+export type PayloadDataDetailsProps = PropertyProps & {
+  payload?: XyoPayload
+  size?: SizeProp
+  badge?: boolean
+}
+
+export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, badge, payload, ...props }) => {
+  const wrapper = payload ? new XyoPayloadWrapper(payload) : undefined
+
+  const [viewSourceOpen, setViewSourceOpen] = useState(false)
+  const hash = wrapper?.hash
+
+  let elevation = 2
+  if (props.paper) {
+    elevation += props.elevation ?? 0
+  }
+
+  const actions: PropertyAction[] = [
+    {
+      icon: <VisibilityIcon />,
+      name: 'View',
+      onClick: () => setViewSourceOpen(true),
+    },
+    {
+      icon: <ContentCopyIcon />,
+      name: 'Copy',
+      onClick: async () => await navigator.clipboard.writeText(wrapper?.hash ?? ''),
+    },
+  ]
+
+  const onCopy = async () => {
+    await navigator.clipboard.writeText(wrapper?.stringified ?? '')
+  }
+
+  return (
+    <>
+      <Property
+        titleProps={{ elevation }}
+        badge={badge}
+        size={size}
+        actions={actions}
+        title="Payload Hash"
+        value={hash ?? '<Unknown>'}
+        tip="This is the payload hash"
+        {...props}
+      />
+      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>
+        <DialogTitle>Hash Source</DialogTitle>
+        <DialogContent>
+          <PayloadHashSourceDetails noTitle payload={payload} />
+        </DialogContent>
+        <DialogActions>
+          <ButtonEx color="secondary" onClick={onCopy}>
+            Copy
+          </ButtonEx>
+          <ButtonEx color="secondary" onClick={() => setViewSourceOpen(false)}>
+            Close
+          </ButtonEx>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

package/src/components/Details/Details.stories.tsx

@@ -0,0 +1,62 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { samplePayload, samplePayloadFromBuilder, useAppThemeDecorator } from '@xyo-network/react-storybook'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+
+import { PayloadDetails } from './Details'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PayloadDetails,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'payload/Details',
+} as ComponentMeta<typeof PayloadDetails>
+
+const Template: ComponentStory<typeof PayloadDetails> = (args) => (
+  <BrowserRouter>
+    <Routes>
+      <Route path="temp" element={<h1>Successfully navigated to archivePath</h1>} />
+      <Route path="*" element={<PayloadDetails {...args}></PayloadDetails>}></Route>
+    </Routes>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [useAppThemeDecorator]
+
+const WithSample = Template.bind({})
+WithSample.args = { payload: samplePayload }
+WithSample.decorators = [useAppThemeDecorator]
+
+const WithBuilderSample = Template.bind({})
+WithBuilderSample.args = { payload: samplePayloadFromBuilder }
+WithBuilderSample.decorators = [useAppThemeDecorator]
+
+const WithArchiveLink = Template.bind({})
+WithArchiveLink.args = { payload: samplePayloadFromBuilder }
+WithArchiveLink.decorators = [useAppThemeDecorator]
+
+const DefaultPaper = Template.bind({})
+DefaultPaper.args = { paper: true }
+DefaultPaper.decorators = [useAppThemeDecorator]
+
+const WithSamplePaper = Template.bind({})
+WithSamplePaper.args = { paper: true, payload: samplePayload }
+WithSamplePaper.decorators = [useAppThemeDecorator]
+
+const WithBuilderSamplePaper = Template.bind({})
+WithBuilderSamplePaper.args = { paper: true, payload: samplePayloadFromBuilder }
+WithBuilderSamplePaper.decorators = [useAppThemeDecorator]
+
+const WithArchiveLinkPaper = Template.bind({})
+WithArchiveLinkPaper.args = { paper: true, payload: samplePayloadFromBuilder }
+WithArchiveLinkPaper.decorators = [useAppThemeDecorator]
+
+export { Default, DefaultPaper, WithArchiveLink, WithArchiveLinkPaper, WithBuilderSample, WithBuilderSamplePaper, WithSample, WithSamplePaper }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Details/Details.tsx

@@ -0,0 +1,24 @@
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { XyoPayload } from '@xyo-network/payload'
+
+import { PayloadDataDetails } from './DataDetails'
+import { PayloadJsonDetails } from './JsonDetails'
+import { PayloadValidationDetails } from './ValidationDetails'
+
+export type WithPaper<T> = T & { paper: true }
+export type WithoutPaper<T> = T & { paper?: false }
+
+export type PayloadDetailsProps = FlexBoxProps & {
+  payload?: XyoPayload
+  paper?: boolean
+}
+
+export const PayloadDetails: React.FC<PayloadDetailsProps> = ({ paper, payload, ...props }) => {
+  return (
+    <FlexCol gap={1} justifyContent="flex-start" alignItems="stretch" marginTop={2} marginBottom={8} {...props}>
+      <PayloadDataDetails paper={paper} size="large" badge payload={payload} />
+      <PayloadValidationDetails paper={paper} value={payload} />
+      <PayloadJsonDetails paper={paper} payload={payload} />
+    </FlexCol>
+  )
+}

package/src/components/Details/HashSourceDetails.tsx

@@ -0,0 +1,43 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import { IconButton, Typography, useTheme } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import { QuickTipButton } from '@xylabs/react-quick-tip-button'
+import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
+
+export interface PayloadHashSourceDetailsProps extends FlexBoxProps {
+  noTitle?: boolean
+  payload?: XyoPayload
+}
+
+export const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({ noTitle = false, payload, ...props }) => {
+  const theme = useTheme()
+  const payloadWrapper = payload ? new XyoPayloadWrapper(payload) : null
+
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      {noTitle ? null : (
+        <FlexRow margin={1} justifyContent="flex-start">
+          <Typography>Hash Source</Typography>
+          <QuickTipButton title="Hash Source">The actual string used to generate the hash (SHA256)</QuickTipButton>
+        </FlexRow>
+      )}
+      <FlexRow>
+        <FlexGrowRow background border={1} borderColor={theme.palette.divider} justifyContent="start">
+          <Typography padding={2} fontFamily="monospace" variant="body1" sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}>
+            {payloadWrapper?.stringified ?? ''}
+          </Typography>
+        </FlexGrowRow>
+        <IconButton>
+          <ContentCopyIcon />
+        </IconButton>
+      </FlexRow>
+      {noTitle ? (
+        <FlexRow margin={1} justifyContent="flex-start">
+          <Typography variant="body2">
+            The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.
+          </Typography>
+        </FlexRow>
+      ) : null}
+    </FlexCol>
+  )
+}