@xyo-network/react-payload-details 2.60.12 → 2.62.3

package/dist/index.mjs

@@ -0,0 +1,169 @@
+// src/components/Details/DataDetails.tsx
+import ContentCopyIcon2 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 { PayloadHasher as PayloadHasher2 } from "@xyo-network/hash";
+import { Property } from "@xyo-network/react-property";
+import { usePayloadHash } from "@xyo-network/react-shared";
+import { useState } from "react";
+
+// src/components/Details/HashSourceDetails.tsx
+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 { PayloadHasher } from "@xyo-network/hash";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PayloadHashSourceDetails = ({ noTitle = false, payload, ...props }) => {
+  const theme = useTheme();
+  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : "";
+  return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", ...props, children: [
+    noTitle ? null : /* @__PURE__ */ jsxs(FlexRow, { margin: 1, justifyContent: "flex-start", children: [
+      /* @__PURE__ */ jsx(Typography, { children: "Hash Source" }),
+      /* @__PURE__ */ jsx(QuickTipButton, { title: "Hash Source", children: "The actual string used to generate the hash (SHA256)" })
+    ] }),
+    /* @__PURE__ */ jsxs(FlexRow, { children: [
+      /* @__PURE__ */ jsx(FlexGrowRow, { background: true, border: 1, borderColor: theme.palette.divider, justifyContent: "start", children: /* @__PURE__ */ jsx(Typography, { padding: 2, fontFamily: "monospace", variant: "body1", sx: { overflowWrap: "break-word", wordBreak: "break-all" }, children: payloadString }) }),
+      /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(ContentCopyIcon, {}) })
+    ] }),
+    noTitle ? /* @__PURE__ */ jsx(FlexRow, { margin: 1, justifyContent: "flex-start", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "The actual string used to generate the hash (SHA256). This can be used to validate the hash manually." }) }) : null
+  ] });
+};
+
+// src/components/Details/DataDetails.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PayloadDataDetails = ({ size, badge, payload, ...props }) => {
+  const payloadString = payload ? JSON.stringify(PayloadHasher2.hashFields(payload), null, 2) : "";
+  const [viewSourceOpen, setViewSourceOpen] = useState(false);
+  const hash = usePayloadHash(payload);
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  const actions = [
+    {
+      icon: /* @__PURE__ */ jsx2(VisibilityIcon, {}),
+      name: "View",
+      onClick: () => setViewSourceOpen(true)
+    },
+    {
+      icon: /* @__PURE__ */ jsx2(ContentCopyIcon2, {}),
+      name: "Copy",
+      onClick: async () => await navigator.clipboard.writeText(hash ?? "")
+    }
+  ];
+  const onCopy = async () => {
+    await navigator.clipboard.writeText(payloadString);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      Property,
+      {
+        titleProps: { elevation },
+        badge,
+        size,
+        actions,
+        title: "Payload Hash",
+        value: hash ?? "<Unknown>",
+        tip: "This is the payload hash",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxs2(Dialog, { open: viewSourceOpen, onClose: () => setViewSourceOpen(false), children: [
+      /* @__PURE__ */ jsx2(DialogTitle, { children: "Hash Source" }),
+      /* @__PURE__ */ jsx2(DialogContent, { children: /* @__PURE__ */ jsx2(PayloadHashSourceDetails, { noTitle: true, payload }) }),
+      /* @__PURE__ */ jsxs2(DialogActions, { children: [
+        /* @__PURE__ */ jsx2(ButtonEx, { color: "secondary", onClick: onCopy, children: "Copy" }),
+        /* @__PURE__ */ jsx2(ButtonEx, { color: "secondary", onClick: () => setViewSourceOpen(false), children: "Close" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/Details/Details.tsx
+import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
+import { forwardRef } from "react";
+
+// src/components/Details/JsonDetails.tsx
+import { Paper, useMediaQuery, useTheme as useTheme2 } from "@mui/material";
+import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
+import { PropertyGroup } from "@xyo-network/react-property";
+import { lazy, Suspense } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var JsonView = lazy(() => import(
+  /* webpackChunkName: "jsonView" */
+  "react-json-view"
+));
+var PayloadJsonDetails = ({ jsonViewProps, payload = {}, ...props }) => {
+  const { breakpoints, palette } = useTheme2();
+  const belowSm = useMediaQuery(breakpoints.down("sm"));
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  const jsonTheme = palette.mode === "dark" ? "shapeshifter" : void 0;
+  return /* @__PURE__ */ jsx3(PropertyGroup, { titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload", ...props, children: /* @__PURE__ */ jsx3(Paper, { square: true, variant: "elevation", style: { overflow: "hidden", padding: "16px", width: "100%" }, children: /* @__PURE__ */ jsx3(Suspense, { fallback: /* @__PURE__ */ jsx3(FlexGrowRow2, {}), children: /* @__PURE__ */ jsx3(
+    JsonView,
+    {
+      groupArraysAfterLength: 20,
+      style: { backgroundColor: void 0, overflow: "hidden" },
+      src: payload,
+      enableClipboard: true,
+      theme: jsonTheme,
+      collapseStringsAfterLength: belowSm ? 24 : 32,
+      ...jsonViewProps
+    }
+  ) }) }) });
+};
+
+// src/components/Details/ValidationDetails/ValidationDetails.tsx
+import { Typography as Typography2 } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+import { usePromise } from "@xylabs/react-promise";
+import { PayloadValidator } from "@xyo-network/payload-validator";
+import { Property as Property2, PropertyGroup as PropertyGroup2 } from "@xyo-network/react-property";
+import { SchemaProperty } from "@xyo-network/react-schema";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var PayloadValidationDetails = ({ skipBody = false, value, ...props }) => {
+  const [validateErrors] = usePromise(async () => value ? await new PayloadValidator(value).validate() : void 0, [value]);
+  const bodyErrors = skipBody ? [] : validateErrors ?? [];
+  const errors = [...bodyErrors];
+  let elevation = 2;
+  if (props.paper) {
+    elevation += props.elevation ?? 0;
+  }
+  return /* @__PURE__ */ jsxs3(PropertyGroup2, { titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload", ...props, children: [
+    /* @__PURE__ */ jsx4(
+      Property2,
+      {
+        titleProps: { elevation },
+        flexGrow: 1,
+        title: "Valid",
+        value: errors.length === 0 ? "True" : "False",
+        tip: errors.length > 0 ? /* @__PURE__ */ jsx4(FlexCol2, { children: errors.map((error, index) => {
+          return /* @__PURE__ */ jsx4(Typography2, { children: error.toString() }, index);
+        }) }) : /* @__PURE__ */ jsx4(Typography2, { children: "No Errors" })
+      }
+    ),
+    value?.schema && /* @__PURE__ */ jsx4(SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })
+  ] });
+};
+
+// src/components/Details/Details.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var PayloadDetails = forwardRef(({ paper, payload, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs4(FlexCol3, { gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ref, ...props, children: [
+    /* @__PURE__ */ jsx5(PayloadDataDetails, { paper, size: "large", badge: true, payload }),
+    /* @__PURE__ */ jsx5(PayloadValidationDetails, { paper, value: payload }),
+    /* @__PURE__ */ jsx5(PayloadJsonDetails, { paper, payload })
+  ] });
+});
+PayloadDetails.displayName = "PayloadDetails";
+export {
+  PayloadDataDetails,
+  PayloadDetails,
+  PayloadJsonDetails,
+  PayloadValidationDetails
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Details/DataDetails.tsx","../src/components/Details/HashSourceDetails.tsx","../src/components/Details/Details.tsx","../src/components/Details/JsonDetails.tsx","../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["import ContentCopyIcon from '@mui/icons-material/ContentCopy'\nimport VisibilityIcon from '@mui/icons-material/Visibility'\nimport { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport { Payload } from '@xyo-network/payload-model'\nimport { Property, PropertyAction, PropertyProps } from '@xyo-network/react-property'\nimport { SizeProp, usePayloadHash } from '@xyo-network/react-shared'\nimport { useState } from 'react'\n\nimport { PayloadHashSourceDetails } from './HashSourceDetails'\n\nexport type PayloadDataDetailsProps = PropertyProps & {\n  badge?: boolean\n  payload?: Payload\n  size?: SizeProp\n}\n\nexport const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, badge, payload, ...props }) => {\n  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''\n\n  const [viewSourceOpen, setViewSourceOpen] = useState(false)\n  const hash = usePayloadHash(payload)\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const actions: PropertyAction[] = [\n    {\n      icon: <VisibilityIcon />,\n      name: 'View',\n      onClick: () => setViewSourceOpen(true),\n    },\n    {\n      icon: <ContentCopyIcon />,\n      name: 'Copy',\n      onClick: async () => await navigator.clipboard.writeText(hash ?? ''),\n    },\n  ]\n\n  const onCopy = async () => {\n    await navigator.clipboard.writeText(payloadString)\n  }\n\n  return (\n    <>\n      <Property\n        titleProps={{ elevation }}\n        badge={badge}\n        size={size}\n        actions={actions}\n        title=\"Payload Hash\"\n        value={hash ?? '<Unknown>'}\n        tip=\"This is the payload hash\"\n        {...props}\n      />\n      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>\n        <DialogTitle>Hash Source</DialogTitle>\n        <DialogContent>\n          <PayloadHashSourceDetails noTitle payload={payload} />\n        </DialogContent>\n        <DialogActions>\n          <ButtonEx color=\"secondary\" onClick={onCopy}>\n            Copy\n          </ButtonEx>\n          <ButtonEx color=\"secondary\" onClick={() => setViewSourceOpen(false)}>\n            Close\n          </ButtonEx>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n","import ContentCopyIcon from '@mui/icons-material/ContentCopy'\nimport { IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport { Payload } from '@xyo-network/payload-model'\n\nexport interface PayloadHashSourceDetailsProps extends FlexBoxProps {\n  noTitle?: boolean\n  payload?: Payload\n}\n\nexport const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({ noTitle = false, payload, ...props }) => {\n  const theme = useTheme()\n  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''\n\n  return (\n    <FlexCol alignItems=\"stretch\" {...props}>\n      {noTitle ? null : (\n        <FlexRow margin={1} justifyContent=\"flex-start\">\n          <Typography>Hash Source</Typography>\n          <QuickTipButton title=\"Hash Source\">The actual string used to generate the hash (SHA256)</QuickTipButton>\n        </FlexRow>\n      )}\n      <FlexRow>\n        <FlexGrowRow background border={1} borderColor={theme.palette.divider} justifyContent=\"start\">\n          <Typography padding={2} fontFamily=\"monospace\" variant=\"body1\" sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}>\n            {payloadString}\n          </Typography>\n        </FlexGrowRow>\n        <IconButton>\n          <ContentCopyIcon />\n        </IconButton>\n      </FlexRow>\n      {noTitle ? (\n        <FlexRow margin={1} justifyContent=\"flex-start\">\n          <Typography variant=\"body2\">\n            The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.\n          </Typography>\n        </FlexRow>\n      ) : null}\n    </FlexCol>\n  )\n}\n","import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\nimport { Payload } from '@xyo-network/payload-model'\nimport { forwardRef } from 'react'\n\nimport { PayloadDataDetails } from './DataDetails'\nimport { PayloadJsonDetails } from './JsonDetails'\nimport { PayloadValidationDetails } from './ValidationDetails'\n\nexport type WithPaper<T> = T & { paper: true }\nexport type WithoutPaper<T> = T & { paper?: false }\n\nexport type PayloadDetailsProps = FlexBoxProps & {\n  paper?: boolean\n  payload?: Payload\n}\n\nexport const PayloadDetails = forwardRef<HTMLDivElement, PayloadDetailsProps>(({ paper, payload, ...props }, ref) => {\n  return (\n    <FlexCol gap={1} justifyContent=\"flex-start\" alignItems=\"stretch\" marginTop={2} marginBottom={8} ref={ref} {...props}>\n      <PayloadDataDetails paper={paper} size=\"large\" badge payload={payload} />\n      <PayloadValidationDetails paper={paper} value={payload} />\n      <PayloadJsonDetails paper={paper} payload={payload} />\n    </FlexCol>\n  )\n})\n\nPayloadDetails.displayName = 'PayloadDetails'\n","import { Paper, useMediaQuery, useTheme } from '@mui/material'\nimport { FlexGrowRow } from '@xylabs/react-flexbox'\nimport { Payload } from '@xyo-network/payload-model'\nimport { PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'\nimport { lazy, Suspense } from 'react'\nimport { ReactJsonViewProps } from 'react-json-view'\n\nconst JsonView = lazy(() => import(/* webpackChunkName: \"jsonView\" */ 'react-json-view'))\n\nexport type PayloadJsonDetailsProps = PropertyGroupProps & {\n  jsonViewProps?: ReactJsonViewProps\n  payload?: Payload\n}\n\nexport const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({ jsonViewProps, payload = {}, ...props }) => {\n  const { breakpoints, palette } = useTheme()\n  const belowSm = useMediaQuery(breakpoints.down('sm'))\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"JSON\" tip=\"The raw JSON of the payload\" {...props}>\n      <Paper square variant=\"elevation\" style={{ overflow: 'hidden', padding: '16px', width: '100%' }}>\n        <Suspense fallback={<FlexGrowRow />}>\n          <JsonView\n            groupArraysAfterLength={20}\n            style={{ backgroundColor: undefined, overflow: 'hidden' }}\n            src={payload}\n            enableClipboard\n            theme={jsonTheme}\n            collapseStringsAfterLength={belowSm ? 24 : 32}\n            {...jsonViewProps}\n          />\n        </Suspense>\n      </Paper>\n    </PropertyGroup>\n  )\n}\n","import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { Property, PropertyGroup } from '@xyo-network/react-property'\nimport { SchemaProperty } from '@xyo-network/react-schema'\n\nimport { PayloadValidationDetailsProps } from './ValidationDetailsProps'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({ skipBody = false, value, ...props }) => {\n  const [validateErrors] = usePromise(async () => (value ? await new PayloadValidator(value).validate() : undefined), [value])\n\n  const bodyErrors = skipBody ? [] : validateErrors ?? []\n  const errors: Error[] = [...bodyErrors]\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"Validation\" tip=\"The results from validating the payload\" {...props}>\n      <Property\n        titleProps={{ elevation }}\n        flexGrow={1}\n        title=\"Valid\"\n        value={errors.length === 0 ? 'True' : 'False'}\n        tip={\n          errors.length > 0 ? (\n            <FlexCol>\n              {errors.map((error, index) => {\n                return <Typography key={index}>{error.toString()}</Typography>\n              })}\n            </FlexCol>\n          ) : (\n            <Typography>No Errors</Typography>\n          )\n        }\n      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":"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","names":["ContentCopyIcon","PayloadHasher","jsx","jsxs","PayloadHasher","ContentCopyIcon","FlexCol","useTheme","FlexGrowRow","jsx","Typography","FlexCol","Property","PropertyGroup","jsx","jsxs","jsx","jsxs","FlexCol"]}

package/package.json

@@ -10,23 +10,23 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/react-button": "~2.17.15",
-    "@xylabs/react-flexbox": "~2.17.15",
-    "@xylabs/react-promise": "~2.17.15",
-    "@xylabs/react-quick-tip-button": "~2.17.15",
-    "@xyo-network/payload-model": "^2.72.9",
-    "@xyo-network/payload-validator": "^2.72.9",
-    "@xyo-network/payload-wrapper": "^2.72.9",
-    "@xyo-network/react-property": "~2.60.12",
-    "@xyo-network/react-schema": "~2.60.12",
-    "@xyo-network/react-shared": "~2.60.12",
+    "@xylabs/react-button": "~2.18.4",
+    "@xylabs/react-flexbox": "~2.18.4",
+    "@xylabs/react-promise": "~2.18.4",
+    "@xylabs/react-quick-tip-button": "~2.18.4",
+    "@xyo-network/hash": "^2.74.1",
+    "@xyo-network/payload-model": "^2.74.1",
+    "@xyo-network/payload-validator": "^2.74.1",
+    "@xyo-network/react-property": "~2.62.3",
+    "@xyo-network/react-schema": "~2.62.3",
+    "@xyo-network/react-shared": "~2.62.3",
     "react-json-view": "^1.21.3"
   },
   "devDependencies": {
-    "@storybook/react": "^7.4.0",
-    "@xylabs/ts-scripts-yarn3": "^2.19.4",
-    "@xylabs/tsconfig-react": "^2.19.4",
-    "@xyo-network/react-storybook": "~2.60.12",
+    "@storybook/react": "^7.4.3",
+    "@xylabs/ts-scripts-yarn3": "^3.0.28",
+    "@xylabs/tsconfig-react": "^3.0.28",
+    "@xyo-network/react-storybook": "~2.62.3",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
@@ -39,27 +39,35 @@
     "react-router-dom": "^6"
   },
   "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"
+        "import": {
+          "types": "./dist/index.d.mts",
+          "default": "./dist/index.mjs"
+        },
+        "require": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        }
       },
       "browser": {
-        "import": "./dist/esm/index.js",
-        "require": "./dist/cjs/index.js"
+        "import": {
+          "types": "./dist/index.d.mts",
+          "default": "./dist/index.mjs"
+        },
+        "require": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        }
       },
-      "default": "./dist/esm/index.js"
-    },
-    "./dist/docs.json": {
-      "default": "./dist/docs.json"
+      "default": "./dist/index.mjs"
     },
     "./package.json": "./package.json"
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "homepage": "https://xyo.network",
   "keywords": [
     "xyo",
@@ -80,6 +88,6 @@
     "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/types/index.d.ts",
-  "version": "2.60.12"
+  "types": "dist/index.d.ts",
+  "version": "2.62.3"
 }

package/src/components/Details/DataDetails.tsx

@@ -2,8 +2,8 @@ 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 { PayloadHasher } from '@xyo-network/hash'
 import { Payload } from '@xyo-network/payload-model'
-import { PayloadWrapper } from '@xyo-network/payload-wrapper'
 import { Property, PropertyAction, PropertyProps } from '@xyo-network/react-property'
 import { SizeProp, usePayloadHash } from '@xyo-network/react-shared'
 import { useState } from 'react'
@@ -17,7 +17,7 @@ export type PayloadDataDetailsProps = PropertyProps & {
 }
 
 export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, badge, payload, ...props }) => {
-  const wrapper = payload ? PayloadWrapper.wrap(payload) : undefined
+  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''
 
   const [viewSourceOpen, setViewSourceOpen] = useState(false)
   const hash = usePayloadHash(payload)
@@ -41,7 +41,7 @@ export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, ba
   ]
 
   const onCopy = async () => {
-    await navigator.clipboard.writeText(wrapper?.stringified ?? '')
+    await navigator.clipboard.writeText(payloadString)
   }
 
   return (

package/src/components/Details/HashSourceDetails.tsx

@@ -2,8 +2,8 @@ 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 { PayloadHasher } from '@xyo-network/hash'
 import { Payload } from '@xyo-network/payload-model'
-import { PayloadWrapper } from '@xyo-network/payload-wrapper'
 
 export interface PayloadHashSourceDetailsProps extends FlexBoxProps {
   noTitle?: boolean
@@ -12,7 +12,7 @@ export interface PayloadHashSourceDetailsProps extends FlexBoxProps {
 
 export const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({ noTitle = false, payload, ...props }) => {
   const theme = useTheme()
-  const payloadWrapper = payload ? PayloadWrapper.wrap(payload) : null
+  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''
 
   return (
     <FlexCol alignItems="stretch" {...props}>
@@ -25,7 +25,7 @@ export const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> =
       <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 ?? ''}
+            {payloadString}
           </Typography>
         </FlexGrowRow>
         <IconButton>

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

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PayloadDataDetails = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ContentCopy_1 = tslib_1.__importDefault(require("@mui/icons-material/ContentCopy"));
-const Visibility_1 = tslib_1.__importDefault(require("@mui/icons-material/Visibility"));
-const material_1 = require("@mui/material");
-const react_button_1 = require("@xylabs/react-button");
-const payload_wrapper_1 = require("@xyo-network/payload-wrapper");
-const react_property_1 = require("@xyo-network/react-property");
-const react_shared_1 = require("@xyo-network/react-shared");
-const react_1 = require("react");
-const HashSourceDetails_1 = require("./HashSourceDetails");
-const PayloadDataDetails = (_a) => {
-    var _b;
-    var { size, badge, payload } = _a, props = tslib_1.__rest(_a, ["size", "badge", "payload"]);
-    const wrapper = payload ? payload_wrapper_1.PayloadWrapper.wrap(payload) : undefined;
-    const [viewSourceOpen, setViewSourceOpen] = (0, react_1.useState)(false);
-    const hash = (0, react_shared_1.usePayloadHash)(payload);
-    let elevation = 2;
-    if (props.paper) {
-        elevation += (_b = props.elevation) !== null && _b !== void 0 ? _b : 0;
-    }
-    const actions = [
-        {
-            icon: (0, jsx_runtime_1.jsx)(Visibility_1.default, {}),
-            name: 'View',
-            onClick: () => setViewSourceOpen(true),
-        },
-        {
-            icon: (0, jsx_runtime_1.jsx)(ContentCopy_1.default, {}),
-            name: 'Copy',
-            onClick: () => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return yield navigator.clipboard.writeText(hash !== null && hash !== void 0 ? hash : ''); }),
-        },
-    ];
-    const onCopy = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _c;
-        yield navigator.clipboard.writeText((_c = wrapper === null || wrapper === void 0 ? void 0 : wrapper.stringified) !== null && _c !== void 0 ? _c : '');
-    });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_property_1.Property, Object.assign({ titleProps: { elevation }, badge: badge, size: size, actions: actions, title: "Payload Hash", value: hash !== null && hash !== void 0 ? hash : '<Unknown>', tip: "This is the payload hash" }, props)), (0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ open: viewSourceOpen, onClose: () => setViewSourceOpen(false) }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: "Hash Source" }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(HashSourceDetails_1.PayloadHashSourceDetails, { noTitle: true, payload: payload }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, Object.assign({ color: "secondary", onClick: onCopy }, { children: "Copy" })), (0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, Object.assign({ color: "secondary", onClick: () => setViewSourceOpen(false) }, { children: "Close" }))] })] }))] }));
-};
-exports.PayloadDataDetails = PayloadDataDetails;
-//# sourceMappingURL=DataDetails.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/DataDetails.tsx"],"names":[],"mappings":";;;;;AAAA,0FAA6D;AAC7D,wFAA2D;AAC3D,4CAAiF;AACjF,uDAA+C;AAE/C,kEAA6D;AAC7D,gEAAqF;AACrF,4DAAoE;AACpE,iCAAgC;AAEhC,2DAA8D;AAQvD,MAAM,kBAAkB,GAAsC,CAAC,EAAkC,EAAE,EAAE;;QAAtC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,OAAY,EAAP,KAAK,sBAAhC,4BAAkC,CAAF;IACpG,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,gCAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAElE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC3D,MAAM,IAAI,GAAG,IAAA,6BAAc,EAAC,OAAO,CAAC,CAAA;IAEpC,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAA;KAClC;IAED,MAAM,OAAO,GAAqB;QAChC;YACE,IAAI,EAAE,uBAAC,oBAAc,KAAG;YACxB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC;SACvC;QACD;YACE,IAAI,EAAE,uBAAC,qBAAe,KAAG;YACzB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,GAAS,EAAE,0DAAC,OAAA,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,CAAA,GAAA;SACrE;KACF,CAAA;IAED,MAAM,MAAM,GAAG,GAAS,EAAE;;QACxB,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,EAAE,CAAC,CAAA;IACjE,CAAC,CAAA,CAAA;IAED,OAAO,CACL,6DACE,uBAAC,yBAAQ,kBACP,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,aAAJ,IAAI,cAAJ,IAAI,GAAI,WAAW,EAC1B,GAAG,EAAC,0BAA0B,IAC1B,KAAK,EACT,EACF,wBAAC,iBAAM,kBAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBACnE,uBAAC,sBAAW,8BAA0B,EACtC,uBAAC,wBAAa,cACZ,uBAAC,4CAAwB,IAAC,OAAO,QAAC,OAAO,EAAE,OAAO,GAAI,GACxC,EAChB,wBAAC,wBAAa,eACZ,uBAAC,uBAAQ,kBAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,0BAEhC,EACX,uBAAC,uBAAQ,kBAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,2BAExD,IACG,KACT,IACR,CACJ,CAAA;AACH,CAAC,CAAA;AAxDY,QAAA,kBAAkB,sBAwD9B"}

package/dist/cjs/components/Details/Details.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PayloadDetails = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_flexbox_1 = require("@xylabs/react-flexbox");
-const react_1 = require("react");
-const DataDetails_1 = require("./DataDetails");
-const JsonDetails_1 = require("./JsonDetails");
-const ValidationDetails_1 = require("./ValidationDetails");
-exports.PayloadDetails = (0, react_1.forwardRef)((_a, ref) => {
-    var { paper, payload } = _a, props = tslib_1.__rest(_a, ["paper", "payload"]);
-    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ gap: 1, justifyContent: "flex-start", alignItems: "stretch", marginTop: 2, marginBottom: 8, ref: ref }, props, { children: [(0, jsx_runtime_1.jsx)(DataDetails_1.PayloadDataDetails, { paper: paper, size: "large", badge: true, payload: payload }), (0, jsx_runtime_1.jsx)(ValidationDetails_1.PayloadValidationDetails, { paper: paper, value: payload }), (0, jsx_runtime_1.jsx)(JsonDetails_1.PayloadJsonDetails, { paper: paper, payload: payload })] })));
-});
-exports.PayloadDetails.displayName = 'PayloadDetails';
-//# sourceMappingURL=Details.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":";;;;;AAAA,yDAA6D;AAE7D,iCAAkC;AAElC,+CAAkD;AAClD,+CAAkD;AAClD,2DAA8D;AAUjD,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAsC,CAAC,EAA4B,EAAE,GAAG,EAAE,EAAE;QAArC,EAAE,KAAK,EAAE,OAAO,OAAY,EAAP,KAAK,sBAA1B,oBAA4B,CAAF;IACvG,OAAO,CACL,wBAAC,uBAAO,kBAAC,GAAG,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,IAAM,KAAK,eAClH,uBAAC,gCAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,QAAC,OAAO,EAAE,OAAO,GAAI,EACzE,uBAAC,4CAAwB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAI,EAC1D,uBAAC,gCAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,KAC9C,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA"}

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

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PayloadHashSourceDetails = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ContentCopy_1 = tslib_1.__importDefault(require("@mui/icons-material/ContentCopy"));
-const material_1 = require("@mui/material");
-const react_flexbox_1 = require("@xylabs/react-flexbox");
-const react_quick_tip_button_1 = require("@xylabs/react-quick-tip-button");
-const payload_wrapper_1 = require("@xyo-network/payload-wrapper");
-const PayloadHashSourceDetails = (_a) => {
-    var _b;
-    var { noTitle = false, payload } = _a, props = tslib_1.__rest(_a, ["noTitle", "payload"]);
-    const theme = (0, material_1.useTheme)();
-    const payloadWrapper = payload ? payload_wrapper_1.PayloadWrapper.wrap(payload) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({ alignItems: "stretch" }, props, { children: [noTitle ? null : ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexRow, Object.assign({ margin: 1, justifyContent: "flex-start" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Hash Source" }), (0, jsx_runtime_1.jsx)(react_quick_tip_button_1.QuickTipButton, Object.assign({ title: "Hash Source" }, { children: "The actual string used to generate the hash (SHA256)" }))] }))), (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexRow, { children: [(0, jsx_runtime_1.jsx)(react_flexbox_1.FlexGrowRow, Object.assign({ background: true, border: 1, borderColor: theme.palette.divider, justifyContent: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ padding: 2, fontFamily: "monospace", variant: "body1", sx: { overflowWrap: 'break-word', wordBreak: 'break-all' } }, { children: (_b = payloadWrapper === null || payloadWrapper === void 0 ? void 0 : payloadWrapper.stringified) !== null && _b !== void 0 ? _b : '' })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(ContentCopy_1.default, {}) })] }), noTitle ? ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ margin: 1, justifyContent: "flex-start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: "The actual string used to generate the hash (SHA256). This can be used to validate the hash manually." })) }))) : null] })));
-};
-exports.PayloadHashSourceDetails = PayloadHashSourceDetails;
-//# sourceMappingURL=HashSourceDetails.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HashSourceDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/HashSourceDetails.tsx"],"names":[],"mappings":";;;;;AAAA,0FAA6D;AAC7D,4CAAgE;AAChE,yDAAmF;AACnF,2EAA+D;AAE/D,kEAA6D;AAOtD,MAAM,wBAAwB,GAA4C,CAAC,EAAsC,EAAE,EAAE;;QAA1C,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,OAAY,EAAP,KAAK,sBAApC,sBAAsC,CAAF;IACpH,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IACxB,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,gCAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAEpE,OAAO,CACL,wBAAC,uBAAO,kBAAC,UAAU,EAAC,SAAS,IAAK,KAAK,eACpC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChB,wBAAC,uBAAO,kBAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,iBAC7C,uBAAC,qBAAU,8BAAyB,EACpC,uBAAC,uCAAc,kBAAC,KAAK,EAAC,aAAa,0EAAsE,KACjG,CACX,EACD,wBAAC,uBAAO,eACN,uBAAC,2BAAW,kBAAC,UAAU,QAAC,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,EAAC,OAAO,gBAC3F,uBAAC,qBAAU,kBAAC,OAAO,EAAE,CAAC,EAAE,UAAU,EAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,gBACtH,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,mCAAI,EAAE,IACvB,IACD,EACd,uBAAC,qBAAU,cACT,uBAAC,qBAAe,KAAG,GACR,IACL,EACT,OAAO,CAAC,CAAC,CAAC,CACT,uBAAC,uBAAO,kBAAC,MAAM,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,gBAC7C,uBAAC,qBAAU,kBAAC,OAAO,EAAC,OAAO,2HAEd,IACL,CACX,CAAC,CAAC,CAAC,IAAI,KACA,CACX,CAAA;AACH,CAAC,CAAA;AA/BY,QAAA,wBAAwB,4BA+BpC"}

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

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PayloadJsonDetails = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_flexbox_1 = require("@xylabs/react-flexbox");
-const react_property_1 = require("@xyo-network/react-property");
-const react_1 = require("react");
-const JsonView = (0, react_1.lazy)(() => Promise.resolve().then(() => tslib_1.__importStar(require(/* webpackChunkName: "jsonView" */ 'react-json-view'))));
-const PayloadJsonDetails = (_a) => {
-    var _b;
-    var { jsonViewProps, payload = {} } = _a, props = tslib_1.__rest(_a, ["jsonViewProps", "payload"]);
-    const { breakpoints, palette } = (0, material_1.useTheme)();
-    const belowSm = (0, material_1.useMediaQuery)(breakpoints.down('sm'));
-    let elevation = 2;
-    if (props.paper) {
-        elevation += (_b = props.elevation) !== null && _b !== void 0 ? _b : 0;
-    }
-    const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined;
-    return ((0, jsx_runtime_1.jsx)(react_property_1.PropertyGroup, Object.assign({ titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload" }, props, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ square: true, variant: "elevation", style: { overflow: 'hidden', padding: '16px', width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)(react_flexbox_1.FlexGrowRow, {}) }, { children: (0, jsx_runtime_1.jsx)(JsonView, Object.assign({ groupArraysAfterLength: 20, style: { backgroundColor: undefined, overflow: 'hidden' }, src: payload, enableClipboard: true, theme: jsonTheme, collapseStringsAfterLength: belowSm ? 24 : 32 }, jsonViewProps)) })) })) })));
-};
-exports.PayloadJsonDetails = PayloadJsonDetails;
-//# sourceMappingURL=JsonDetails.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA8D;AAC9D,yDAAmD;AAEnD,gEAA+E;AAC/E,iCAAsC;AAGtC,MAAM,QAAQ,GAAG,IAAA,YAAI,EAAC,GAAG,EAAE,2DAAQ,kCAAkC,CAAC,iBAAiB,GAAC,CAAC,CAAA;AAOlF,MAAM,kBAAkB,GAAsC,CAAC,EAAyC,EAAE,EAAE;;QAA7C,EAAE,aAAa,EAAE,OAAO,GAAG,EAAE,OAAY,EAAP,KAAK,sBAAvC,4BAAyC,CAAF;IAC3G,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,IAAA,mBAAQ,GAAE,CAAA;IAC3C,MAAM,OAAO,GAAG,IAAA,wBAAa,EAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAErD,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAA;KAClC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEtE,OAAO,CACL,uBAAC,8BAAa,kBAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,IAAK,KAAK,cAChG,uBAAC,gBAAK,kBAAC,MAAM,QAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,gBAC7F,uBAAC,gBAAQ,kBAAC,QAAQ,EAAE,uBAAC,2BAAW,KAAG,gBACjC,uBAAC,QAAQ,kBACP,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,IACzC,aAAa,EACjB,IACO,IACL,IACM,CACjB,CAAA;AACH,CAAC,CAAA;AA5BY,QAAA,kBAAkB,sBA4B9B"}

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

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PayloadValidationDetails = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_flexbox_1 = require("@xylabs/react-flexbox");
-const react_promise_1 = require("@xylabs/react-promise");
-const payload_validator_1 = require("@xyo-network/payload-validator");
-const react_property_1 = require("@xyo-network/react-property");
-const react_schema_1 = require("@xyo-network/react-schema");
-const PayloadValidationDetails = (_a) => {
-    var _b;
-    var { skipBody = false, value } = _a, props = tslib_1.__rest(_a, ["skipBody", "value"]);
-    const [validateErrors] = (0, react_promise_1.usePromise)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return (value ? yield new payload_validator_1.PayloadValidator(value).validate() : undefined); }), [value]);
-    const bodyErrors = skipBody ? [] : validateErrors !== null && validateErrors !== void 0 ? validateErrors : [];
-    const errors = [...bodyErrors];
-    let elevation = 2;
-    if (props.paper) {
-        elevation += (_b = props.elevation) !== null && _b !== void 0 ? _b : 0;
-    }
-    return ((0, jsx_runtime_1.jsxs)(react_property_1.PropertyGroup, Object.assign({ titleProps: { elevation }, title: "Validation", tip: "The results from validating the payload" }, props, { children: [(0, jsx_runtime_1.jsx)(react_property_1.Property, { titleProps: { elevation }, flexGrow: 1, title: "Valid", value: errors.length === 0 ? 'True' : 'False', tip: errors.length > 0 ? ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, { children: errors.map((error, index) => {
-                        return (0, jsx_runtime_1.jsx)(material_1.Typography, { children: error.toString() }, index);
-                    }) })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "No Errors" })) }), (value === null || value === void 0 ? void 0 : value.schema) && (0, jsx_runtime_1.jsx)(react_schema_1.SchemaProperty, { flexGrow: 1, titleProps: { elevation }, value: value.schema })] })));
-};
-exports.PayloadValidationDetails = PayloadValidationDetails;
-//# sourceMappingURL=ValidationDetails.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ValidationDetails.js","sourceRoot":"","sources":["../../../../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA0C;AAC1C,yDAA+C;AAC/C,yDAAkD;AAClD,sEAAiE;AACjE,gEAAqE;AACrE,4DAA0D;AAInD,MAAM,wBAAwB,GAA4C,CAAC,EAAqC,EAAE,EAAE;;QAAzC,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,OAAY,EAAP,KAAK,sBAAnC,qBAAqC,CAAF;IACnH,MAAM,CAAC,cAAc,CAAC,GAAG,IAAA,0BAAU,EAAC,GAAS,EAAE,0DAAC,OAAA,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,IAAI,oCAAgB,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA,GAAA,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAE5H,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAA;IACvD,MAAM,MAAM,GAAY,CAAC,GAAG,UAAU,CAAC,CAAA;IAEvC,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAA;KAClC;IAED,OAAO,CACL,wBAAC,8BAAa,kBAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,YAAY,EAAC,GAAG,EAAC,yCAAyC,IAAK,KAAK,eAClH,uBAAC,yBAAQ,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,uBAAC,uBAAO,cACL,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;wBAC3B,OAAO,uBAAC,qBAAU,cAAc,KAAK,CAAC,QAAQ,EAAE,IAAxB,KAAK,CAAiC,CAAA;oBAChE,CAAC,CAAC,GACM,CACX,CAAC,CAAC,CAAC,CACF,uBAAC,qBAAU,4BAAuB,CACnC,GAEH,EACD,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,KAAI,uBAAC,6BAAc,IAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,GAAI,KACnF,CACjB,CAAA;AACH,CAAC,CAAA;AAjCY,QAAA,wBAAwB,4BAiCpC"}

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

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=ValidationDetailsProps.js.map

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

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

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

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./ValidationDetails"), exports);
-tslib_1.__exportStar(require("./ValidationDetailsProps"), exports);
-//# sourceMappingURL=index.js.map

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

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

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

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./DataDetails"), exports);
-tslib_1.__exportStar(require("./Details"), exports);
-tslib_1.__exportStar(require("./JsonDetails"), exports);
-tslib_1.__exportStar(require("./ValidationDetails"), exports);
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Details/index.ts"],"names":[],"mappings":";;;AAAA,wDAA6B;AAC7B,oDAAyB;AACzB,wDAA6B;AAC7B,8DAAmC"}

package/dist/cjs/components/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Details"), exports);
-//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./components"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

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

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

@@ -1,36 +0,0 @@
-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 { PayloadWrapper } from '@xyo-network/payload-wrapper';
-import { Property } from '@xyo-network/react-property';
-import { usePayloadHash } from '@xyo-network/react-shared';
-import { useState } from 'react';
-import { PayloadHashSourceDetails } from './HashSourceDetails';
-export const PayloadDataDetails = ({ size, badge, payload, ...props }) => {
-    const wrapper = payload ? PayloadWrapper.wrap(payload) : undefined;
-    const [viewSourceOpen, setViewSourceOpen] = useState(false);
-    const hash = usePayloadHash(payload);
-    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(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