@xyo-network/react-payload 2.23.7

package/dist/esm/hooks/useHuriHash.js

@@ -0,0 +1,21 @@
+import { Huri } from '@xyo-network/core';
+import { useCallback } from 'react';
+import { usePayload } from './usePayload';
+import { useResolveHuri } from './useResolveHuri';
+const useHuriHash = (huriOrHash, huriUri, options) => {
+    const hash = useCallback((huriOrHash) => {
+        if (huriOrHash) {
+            if (typeof huriOrHash === 'string') {
+                return huriOrHash;
+            }
+            if (huriOrHash instanceof Huri) {
+                return huriOrHash.hash;
+            }
+        }
+    }, []);
+    const [payload, notFound, apiError] = usePayload(hash(huriOrHash));
+    const [huriPayload, huriPayloadNotFound, huriApiError] = useResolveHuri(huriUri, notFound, options);
+    return [payload ?? huriPayload, huriPayloadNotFound, apiError ?? huriApiError];
+};
+export { useHuriHash };
+//# sourceMappingURL=useHuriHash.js.map

package/dist/esm/hooks/useHuriHash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHuriHash.js","sourceRoot":"","sources":["../../../src/hooks/useHuriHash.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAc,MAAM,mBAAmB,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAGnC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,WAAW,GAAG,CAAC,UAA0B,EAAE,OAAgB,EAAE,OAA8B,EAA8D,EAAE;IAC/J,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,UAA0B,EAAE,EAAE;QACtD,IAAI,UAAU,EAAE;YACd,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;gBAClC,OAAO,UAAU,CAAA;aAClB;YACD,IAAI,UAAU,YAAY,IAAI,EAAE;gBAC9B,OAAO,UAAU,CAAC,IAAI,CAAA;aACvB;SACF;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAA;IAClE,MAAM,CAAC,WAAW,EAAE,mBAAmB,EAAE,YAAY,CAAC,GAAG,cAAc,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;IAEnG,OAAO,CAAC,OAAO,IAAI,WAAW,EAAE,mBAAmB,EAAE,QAAQ,IAAI,YAAY,CAAC,CAAA;AAChF,CAAC,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/esm/hooks/usePayload.d.ts

@@ -0,0 +1,3 @@
+import { XyoApiError } from '@xyo-network/api';
+import { XyoPayload } from '@xyo-network/core';
+export declare const usePayload: (hash?: string | undefined) => [XyoPayload | undefined, boolean, XyoApiError | undefined];

package/dist/esm/hooks/usePayload.js

@@ -0,0 +1,37 @@
+import { useAsyncEffect } from '@xylabs/sdk-react';
+import { useArchive } from '@xyo-network/react-archive';
+import { useArchivistApi } from '@xyo-network/react-archivist-api';
+import { useState } from 'react';
+export const usePayload = (hash) => {
+    const { api } = useArchivistApi();
+    const { archive } = useArchive();
+    const [notFound, setNotFound] = useState(false);
+    const [apiError, setApiError] = useState();
+    const [payload, setPayload] = useState();
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+        if (hash && hash.length > 0) {
+            try {
+                const result = await api?.archive(archive).payload.hash(hash).get();
+                if (mounted()) {
+                    setApiError(undefined);
+                    if (result?.length) {
+                        setPayload(result[0]);
+                    }
+                    else if (result) {
+                        setNotFound(true);
+                        setPayload(undefined);
+                    }
+                }
+            }
+            catch (e) {
+                setApiError(e);
+                setPayload(undefined);
+                console.error(e);
+            }
+        }
+    }, [hash, api, archive]);
+    return [payload, notFound, apiError];
+};
+//# sourceMappingURL=usePayload.js.map

package/dist/esm/hooks/usePayload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePayload.js","sourceRoot":"","sources":["../../../src/hooks/usePayload.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAa,EAA8D,EAAE;IACtG,MAAM,EAAE,GAAG,EAAE,GAAG,eAAe,EAAE,CAAA;IACjC,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAA;IAChC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAe,CAAA;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAc,CAAA;IACpD,cAAc;IACZ,uDAAuD;IACvD,KAAK,EAAE,OAAO,EAAE,EAAE;QAChB,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,IAAI;gBACF,MAAM,MAAM,GAAG,MAAM,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAA;gBACnE,IAAI,OAAO,EAAE,EAAE;oBACb,WAAW,CAAC,SAAS,CAAC,CAAA;oBACtB,IAAI,MAAM,EAAE,MAAM,EAAE;wBAClB,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;qBACtB;yBAAM,IAAI,MAAM,EAAE;wBACjB,WAAW,CAAC,IAAI,CAAC,CAAA;wBACjB,UAAU,CAAC,SAAS,CAAC,CAAA;qBACtB;iBACF;aACF;YAAC,OAAO,CAAC,EAAE;gBACV,WAAW,CAAC,CAAgB,CAAC,CAAA;gBAC7B,UAAU,CAAC,SAAS,CAAC,CAAA;gBACrB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;aACjB;SACF;IACH,CAAC,EACD,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,CACrB,CAAA;IACD,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;AACtC,CAAC,CAAA"}

package/dist/esm/hooks/useResolveHuri.d.ts

@@ -0,0 +1,5 @@
+import { XyoApiError } from '@xyo-network/api';
+import { XyoPayload } from '@xyo-network/core';
+import { FetchHuriHashOptions } from './lib';
+declare const useResolveHuri: (huriUri?: string | undefined, dependentNotFound?: boolean | undefined, options?: FetchHuriHashOptions | undefined) => [XyoPayload | undefined, boolean, XyoApiError | undefined];
+export { useResolveHuri };

package/dist/esm/hooks/useResolveHuri.js

@@ -0,0 +1,49 @@
+import { useAsyncEffect } from '@xylabs/sdk-react';
+import { Huri } from '@xyo-network/core';
+import { useNetwork } from '@xyo-network/react-network';
+import { useState } from 'react';
+import { findHuriNetwork } from './lib';
+const useResolveHuri = (huriUri, dependentNotFound, options) => {
+    const { network, networks, setNetwork } = useNetwork();
+    const [huriNetwork, setHuriNetwork] = useState();
+    const [huriPayload, setHuriPayload] = useState();
+    const [huriPayloadNotFound, setHuriPayloadNotFound] = useState(false);
+    const [huriApiError, setHuriApiError] = useState();
+    const { changeActiveNetwork } = options ?? {};
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+        if ((dependentNotFound === undefined || dependentNotFound) && huriUri && network !== huriNetwork) {
+            const huriInstance = new Huri(huriUri);
+            const foundHuriNetwork = findHuriNetwork(huriInstance, networks);
+            // Update when we found a huri network and it doesn't match the current one
+            if (foundHuriNetwork && mounted()) {
+                setHuriNetwork(huriNetwork);
+                if (network !== foundHuriNetwork && changeActiveNetwork) {
+                    setNetwork?.(foundHuriNetwork);
+                    return;
+                }
+                // If no matching network try to resolve the huri itself
+                try {
+                    const huriPayload = await huriInstance.fetch();
+                    if (mounted()) {
+                        if (huriPayload) {
+                            setHuriPayload(huriPayload);
+                        }
+                        else {
+                            setHuriPayloadNotFound(true);
+                        }
+                    }
+                }
+                catch (e) {
+                    if (mounted()) {
+                        setHuriApiError(e);
+                    }
+                }
+            }
+        }
+    }, [huriNetwork, huriUri, network, networks, dependentNotFound, setNetwork, changeActiveNetwork]);
+    return [huriPayload, huriPayloadNotFound, huriApiError];
+};
+export { useResolveHuri };
+//# sourceMappingURL=useResolveHuri.js.map

package/dist/esm/hooks/useResolveHuri.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolveHuri.js","sourceRoot":"","sources":["../../../src/hooks/useResolveHuri.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,OAAO,EAAE,IAAI,EAAc,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAwB,eAAe,EAAE,MAAM,OAAO,CAAA;AAE7D,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,iBAA2B,EAAE,OAA8B,EAA8D,EAAE;IACnK,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,CAAA;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAqB,CAAA;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAc,CAAA;IAC5D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAe,CAAA;IAE/D,MAAM,EAAE,mBAAmB,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;IAE7C,cAAc;IACZ,uDAAuD;IACvD,KAAK,EAAE,OAAO,EAAE,EAAE;QAChB,IAAI,CAAC,iBAAiB,KAAK,SAAS,IAAI,iBAAiB,CAAC,IAAI,OAAO,IAAI,OAAO,KAAK,WAAW,EAAE;YAChG,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;YAEtC,MAAM,gBAAgB,GAAG,eAAe,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;YAEhE,2EAA2E;YAC3E,IAAI,gBAAgB,IAAI,OAAO,EAAE,EAAE;gBACjC,cAAc,CAAC,WAAW,CAAC,CAAA;gBAC3B,IAAI,OAAO,KAAK,gBAAgB,IAAI,mBAAmB,EAAE;oBACvD,UAAU,EAAE,CAAC,gBAAgB,CAAC,CAAA;oBAC9B,OAAM;iBACP;gBAED,wDAAwD;gBACxD,IAAI;oBACF,MAAM,WAAW,GAAG,MAAM,YAAY,CAAC,KAAK,EAAE,CAAA;oBAC9C,IAAI,OAAO,EAAE,EAAE;wBACb,IAAI,WAAW,EAAE;4BACf,cAAc,CAAC,WAAW,CAAC,CAAA;yBAC5B;6BAAM;4BACL,sBAAsB,CAAC,IAAI,CAAC,CAAA;yBAC7B;qBACF;iBACF;gBAAC,OAAO,CAAC,EAAE;oBACV,IAAI,OAAO,EAAE,EAAE;wBACb,eAAe,CAAC,CAAgB,CAAC,CAAA;qBAClC;iBACF;aACF;SACF;IACH,CAAC,EACD,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAC9F,CAAA;IAED,OAAO,CAAC,WAAW,EAAE,mBAAmB,EAAE,YAAY,CAAC,CAAA;AACzD,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+//# 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;AAC5B,cAAc,SAAS,CAAA"}

package/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@xyo-network/react-payload",
+  "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"
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/lab": "^5.0.0-alpha.83",
+    "@mui/material": "^5.8.1",
+    "@xylabs/pixel": "^1.3.7",
+    "@xylabs/sdk-js": "^2.5.5",
+    "@xylabs/sdk-react": "^2.12.7",
+    "@xyo-network/api": "^2.20.33",
+    "@xyo-network/core": "^2.20.33",
+    "@xyo-network/network": "^2.20.33",
+    "@xyo-network/panel": "^2.20.33",
+    "@xyo-network/react-auth-service": "^2.23.7",
+    "@xyo-network/react-network": "^2.23.7",
+    "@xyo-network/react-property": "^2.23.7",
+    "@xyo-network/react-shared": "^2.23.7",
+    "@xyo-network/systeminfo-witness": "^2.20.33",
+    "@xyo-network/utils": "^2.20.33",
+    "lodash": "^4.17.21",
+    "luxon": "^2.4.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-icons": "^4.3.1",
+    "react-json-view": "^1.21.3",
+    "react-router-dom": "^6.3.0",
+    "rollbar": "^2.25.0",
+    "typedoc": "^0.22.15"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "devDependencies": {
+    "@babel/core": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@storybook/addon-actions": "^6.5.4",
+    "@storybook/addon-docs": "^6.5.4",
+    "@storybook/addon-essentials": "^6.5.4",
+    "@storybook/addon-interactions": "^6.5.4",
+    "@storybook/addon-links": "^6.5.4",
+    "@storybook/addons": "^6.5.4",
+    "@storybook/api": "^6.5.4",
+    "@storybook/builder-webpack5": "^6.5.4",
+    "@storybook/components": "^6.5.4",
+    "@storybook/core-events": "^6.5.4",
+    "@storybook/manager-webpack5": "^6.5.4",
+    "@storybook/react": "^6.5.4",
+    "@storybook/testing-library": "^0.0.11",
+    "@storybook/theming": "^6.5.4",
+    "@types/lodash": "^4.14.182",
+    "@types/luxon": "^2.3.2",
+    "@xylabs/eslint-config-react": "^2.1.5",
+    "@xylabs/pixel": "^1.3.7",
+    "@xylabs/rollup-config": "^1.1.17",
+    "@xylabs/sdk-js": "^2.5.5",
+    "@xylabs/sdk-react": "^2.12.7",
+    "@xylabs/ts-scripts": "^1.0.66",
+    "@xylabs/tsconfig": "^1.0.13",
+    "assert": "^2.0.0",
+    "axios": "^0.27.2",
+    "storybook-dark-mode": "^1.1.0",
+    "typescript": "^4.6.4"
+  },
+  "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",
+  "peerDependencies": {
+    "axios": ">0.26",
+    "typedoc": "^0.22.13"
+  },
+  "peerDependenciesMeta": {
+    "typedoc": {
+      "optional": true
+    }
+  },
+  "resolutions": {
+    "@storybook/react/webpack": "^5",
+    "bn.js": "^5.2.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "webpack": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "deploy": "yarn deploy3",
+    "lint-pkg": "npmPkgJsonLint .",
+    "build": "yarn clean && tsc -p tsconfig.build.cjs.json && tsc -p tsconfig.build.esm.json && yarn gen:docs",
+    "gen:docs": "typedoc ./src/index.ts --json ./dist/docs.json --tsconfig ./tsconfig.json",
+    "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.23.7",
+  "packageManager": "yarn@3.1.1"
+}

package/src/components/Details/DataDetails.tsx

@@ -0,0 +1,60 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import { ButtonEx, FlexBoxProps, FlexCol } from '@xylabs/sdk-react'
+import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/core'
+import { Property, PropertyAction, SizeProp, usePropertyHeroProps } from '@xyo-network/react-property'
+import { useState } from 'react'
+
+import { PayloadHashSourceDetails } from './HashSourceDetails'
+
+export interface PayloadDataDetailsProps extends FlexBoxProps {
+  value?: XyoPayload
+  size?: SizeProp
+  badge?: boolean
+}
+
+export const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({ size, badge, value, ...props }) => {
+  const wrapper = value ? new XyoPayloadWrapper(value) : undefined
+
+  const propertyHeroProps = usePropertyHeroProps(props)
+  const [viewSourceOpen, setViewSourceOpen] = useState(false)
+  const hash = wrapper?.hash
+
+  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 (
+    <FlexCol alignItems="stretch" {...props}>
+      <Property badge={badge} size={size} actions={actions} title="Payload Hash" value={hash ?? '<Unknown>'} tip="This is the payload hash" {...propertyHeroProps} />
+      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>
+        <DialogTitle>Hash Source</DialogTitle>
+        <DialogContent>
+          <PayloadHashSourceDetails noTitle payload={value} />
+        </DialogContent>
+        <DialogActions>
+          <ButtonEx color="secondary" onClick={onCopy}>
+            Copy
+          </ButtonEx>
+          <ButtonEx color="secondary" onClick={() => setViewSourceOpen(false)}>
+            Close
+          </ButtonEx>
+        </DialogActions>
+      </Dialog>
+    </FlexCol>
+  )
+}

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

@@ -0,0 +1,46 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+
+import { appThemeDecorator, samplePayload, samplePayloadFromBuilder } from '../../.storybook'
+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 = [appThemeDecorator]
+
+const WithSample = Template.bind({})
+WithSample.args = { payload: samplePayload }
+WithSample.decorators = [appThemeDecorator]
+
+const WithBuilderSample = Template.bind({})
+WithBuilderSample.args = { payload: samplePayloadFromBuilder }
+WithBuilderSample.decorators = [appThemeDecorator]
+
+const WithArchiveLink = Template.bind({})
+WithArchiveLink.args = { payload: samplePayloadFromBuilder, payloadMetaDetailsProps: { archivePath: 'temp' } }
+WithArchiveLink.decorators = [appThemeDecorator]
+
+export { Default, WithArchiveLink, WithBuilderSample, WithSample }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Details/Details.tsx

@@ -0,0 +1,33 @@
+import { FlexBoxProps, FlexCol } from '@xylabs/sdk-react'
+import { XyoPayload } from '@xyo-network/core'
+
+import { PayloadDataDetails, PayloadDataDetailsProps } from './DataDetails'
+import { PayloadJsonDetails, PayloadJsonDetailsProps } from './JsonDetails'
+import { PayloadMetaDetails, PayloadMetaDetailsProps } from './MetaDetails'
+import { PayloadValidationDetails, PayloadValidationDetailsProps } from './ValidationDetails'
+
+export interface PayloadDetailsProps extends FlexBoxProps {
+  payload?: XyoPayload
+  payloadDataDetailsProps?: PayloadDataDetailsProps
+  payloadMetaDetailsProps?: PayloadMetaDetailsProps
+  payloadValidationDetailsProps?: PayloadValidationDetailsProps
+  payloadJsonDetailsProps?: PayloadJsonDetailsProps
+}
+
+export const PayloadDetails: React.FC<PayloadDetailsProps> = ({
+  payload,
+  payloadDataDetailsProps,
+  payloadMetaDetailsProps,
+  payloadValidationDetailsProps,
+  payloadJsonDetailsProps,
+  ...props
+}) => {
+  return (
+    <FlexCol justifyContent="flex-start" alignItems="stretch" marginTop={2} marginBottom={8} {...props}>
+      <PayloadDataDetails size="large" badge value={payload} {...payloadDataDetailsProps} />
+      <PayloadMetaDetails value={payload} {...payloadMetaDetailsProps} />
+      <PayloadValidationDetails value={payload} {...payloadValidationDetailsProps} />
+      <PayloadJsonDetails payload={payload} {...payloadJsonDetailsProps} />
+    </FlexCol>
+  )
+}

package/src/components/Details/HashSourceDetails.tsx

@@ -0,0 +1,40 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import { IconButton, Typography, useTheme } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexGrowRow, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
+import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/core'
+
+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 paper 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>
+  )
+}

package/src/components/Details/JsonDetails.tsx

@@ -0,0 +1,31 @@
+import { Paper, Typography, useMediaQuery, useTheme } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexGrowRow, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
+import { XyoPayload } from '@xyo-network/core'
+import { lazy, Suspense } from 'react'
+import { ReactJsonViewProps } from 'react-json-view'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+export interface PayloadJsonDetailsProps extends FlexBoxProps {
+  payload?: XyoPayload
+  jsonViewProps?: ReactJsonViewProps
+}
+
+export const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({ jsonViewProps, payload = {}, ...props }) => {
+  const { breakpoints } = useTheme()
+  const belowSm = useMediaQuery(breakpoints.down('sm'))
+
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      <FlexRow margin={1} justifyContent="flex-start">
+        <Typography>JSON</Typography>
+        <QuickTipButton title="Payload JSON">The raw JSON of the payload</QuickTipButton>
+      </FlexRow>
+      <Paper variant="outlined">
+        <Suspense fallback={<FlexGrowRow />}>
+          <JsonView src={payload} enableClipboard collapseStringsAfterLength={belowSm ? 24 : 32} {...jsonViewProps} />
+        </Suspense>
+      </Paper>
+    </FlexCol>
+  )
+}

package/src/components/Details/MetaDetails.tsx

@@ -0,0 +1,30 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
+import { XyoPayload } from '@xyo-network/core'
+import { Property } from '@xyo-network/react-property'
+import { ArchiveProperty } from '@xyo-network/react-shared'
+
+export interface PayloadMetaDetailsProps extends FlexBoxProps {
+  value?: XyoPayload
+  archivePath?: string
+}
+
+export const PayloadMetaDetails: React.FC<PayloadMetaDetailsProps> = ({ archivePath, value, ...props }) => {
+  return (
+    <FlexCol alignItems="start" {...props}>
+      <FlexRow margin={1} justifyContent="start">
+        <Typography>Meta</Typography>
+        <QuickTipButton title="Payload Meta">The meta fields added to the record by the archivist</QuickTipButton>
+      </FlexRow>
+      <FlexRow flexWrap="wrap">
+        {value?._client ? <Property flexGrow={1} title="Client" value={value?._client ?? '<Unknown>'} tip="This client used to create this payload" /> : null}
+        {value?._archive ? <ArchiveProperty payload={value} path={archivePath} /> : null}
+        {value?._reportedHash ? <Property flexGrow={1} title="Reported Hash" value={value?._reportedHash ?? '<Unknown>'} tip="The has reported by the payload" /> : null}
+        {value?._timestamp ? <Property flexGrow={1} title="Timestamp" value={value?._timestamp ?? '<Unknown>'} tip="This timestamp of the payload" /> : null}
+        {value?._observeDuration ? (
+          <Property flexGrow={1} title="Observation Duration" value={value?._observeDuration ?? '<Unknown>'} tip="This duration of time observed by the witness" />
+        ) : null}
+      </FlexRow>
+    </FlexCol>
+  )
+}

package/src/components/Details/ValidationDetails/SchemaProperty.tsx

@@ -0,0 +1,22 @@
+import FilterNoneIcon from '@mui/icons-material/FilterNone'
+import { useTheme } from '@mui/material'
+import { LinkEx } from '@xylabs/sdk-react'
+import { Property, PropertyValue } from '@xyo-network/react-property'
+
+import { PayloadValidationDetailsProps } from './ValidationDetailsProps'
+
+const SchemaProperty: React.FC<PayloadValidationDetailsProps> = ({ value, viewSchemaUrl }) => {
+  const theme = useTheme()
+  return (
+    <Property flexGrow={1} title="Schema" value={value?.schema} tip="Schema sent with the payload">
+      {viewSchemaUrl ? (
+        <LinkEx href={viewSchemaUrl} target="_blank" rel="noopener noreferrer" display="flex" color={theme.palette.secondary.main}>
+          <PropertyValue value={value?.schema} title="view schema in new window" />
+          <FilterNoneIcon sx={{ left: '-6px', position: 'relative', top: '9px', width: '12px' }} />
+        </LinkEx>
+      ) : null}
+    </Property>
+  )
+}
+
+export { SchemaProperty }

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

@@ -0,0 +1,55 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { appThemeDecorator, samplePayload } from '../../../.storybook'
+import { PayloadDetails } from '../Details'
+import { PayloadValidationDetails } from './ValidationDetails'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  args: {
+    value: {
+      schema: 'network.xyo.schema',
+    },
+  },
+  component: PayloadDetails,
+  decorators: [appThemeDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Payload/ValidationDetails',
+}
+
+const Template: ComponentStory<typeof PayloadValidationDetails> = (args) => (
+  <BrowserRouter>
+    <PayloadValidationDetails {...args} />
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = { skipBody: true, skipMeta: true }
+
+const WithViewSchemaLink = Template.bind({})
+WithViewSchemaLink.args = { viewSchemaUrl: 'http://beta.explore.xyo.network/6fe3f745b1179fefa74cc3c7eab58321bee1c9ca9e34d9585467364cc5d3bbe2/?huri=huri' }
+
+const WithErrorsInToolTip = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+WithErrorsInToolTip.args = { value: { ...samplePayload, ...{ _hash: '6fe3f745b1179fefa74cc3c7eab58321bee1c9ca9e34d9585467364cc5d3bbe2' } } }
+
+const SkipBody = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+SkipBody.args = { skipBody: true, value: { _hash: '44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a', _timestamp: new Date().getTime() } }
+
+const SkipMeta = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+SkipMeta.args = { skipMeta: true, value: { _hash: null, schema: 'network.xyo.schema' } }
+
+export { Default, SkipBody, SkipMeta, WithErrorsInToolTip, WithViewSchemaLink }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Details/ValidationDetails/ValidationDetails.tsx

@@ -0,0 +1,43 @@
+import { Typography } from '@mui/material'
+import { FlexCol, FlexRow, QuickTipButton } from '@xylabs/sdk-react'
+import { XyoPayloadValidator } from '@xyo-network/core'
+import { Property } from '@xyo-network/react-property'
+
+import { SchemaProperty } from './SchemaProperty'
+import { PayloadValidationDetailsProps } from './ValidationDetailsProps'
+
+export const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({ viewSchemaUrl, skipMeta = false, skipBody = false, value, ...props }) => {
+  const validator = value ? new XyoPayloadValidator(value) : undefined
+
+  const bodyErrors = skipBody ? [] : validator?.body.all() ?? []
+  const metaErrors = skipMeta ? [] : validator?.meta.all() ?? []
+  const errors: Error[] = [...bodyErrors, ...metaErrors]
+
+  return (
+    <FlexCol alignItems="start" {...props}>
+      <FlexRow margin={1} justifyContent="flex-start">
+        <Typography>Validation</Typography>
+        <QuickTipButton title="Block Validation">The results from validating the payload</QuickTipButton>
+      </FlexRow>
+      <FlexRow flexWrap="wrap">
+        <Property
+          flexGrow={1}
+          title="Valid"
+          value={errors.length === 0 ? 'True' : 'False'}
+          tip={
+            errors.length > 0 ? (
+              <FlexCol>
+                {errors.map((error, index) => {
+                  return <Typography key={index}>{error.toString()}</Typography>
+                })}
+              </FlexCol>
+            ) : (
+              <Typography>No Errors</Typography>
+            )
+          }
+        />
+        {value?.schema && <SchemaProperty value={value} viewSchemaUrl={viewSchemaUrl} />}
+      </FlexRow>
+    </FlexCol>
+  )
+}