@xyo-network/react-api 2.32.0-rc.7

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AlertProps } from '@mui/material';
+import { XyoApiError } from '@xyo-network/api';
+export interface ApiErrorAlertProps extends AlertProps {
+    call?: XyoApiError;
+}
+declare const ApiErrorAlert: React.FC<ApiErrorAlertProps>;
+export { ApiErrorAlert };
+//# sourceMappingURL=ApiErrorAlert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiErrorAlert.d.ts","sourceRoot":"","sources":["../../../src/components/ApiErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAA0B,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAW/C,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/components/ApiErrorAlert.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertTitle, Typography } from '@mui/material';
+const ApiErrorAlert = ({ call, ...props }) => {
+    return (_jsxs(Alert, { severity: "error", ...props, children: [_jsx(AlertTitle, { children: "Whoops! Something went wrong" }), _jsx(Typography, { sx: { wordBreak: 'break-all' }, children: call?.config?.url }), _jsx(Typography, { variant: "caption", mr: 0.5, fontWeight: "bold", children: "Error:" }), _jsx(Typography, { variant: "caption", children: call?.message })] }));
+};
+export { ApiErrorAlert };
+//# sourceMappingURL=ApiErrorAlert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiErrorAlert.js","sourceRoot":"","sources":["../../../src/components/ApiErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAOzE,MAAM,aAAa,GAAiC,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,CACL,MAAC,KAAK,IAAC,QAAQ,EAAC,OAAO,KAAK,KAAK,aAC/B,KAAC,UAAU,+CAA0C,EACrD,KAAC,UAAU,IAAC,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,YAAG,IAAI,EAAE,MAAM,EAAE,GAAG,GAAc,EAC5E,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,GAAG,EAAE,UAAU,EAAC,MAAM,uBAE3C,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,EAAE,OAAO,GAAc,IACpD,CACT,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/components/JsonRouteWrapper/JsonApiButton.d.ts

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

package/dist/esm/components/JsonRouteWrapper/JsonApiButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonApiButton.d.ts","sourceRoot":"","sources":["../../../../src/components/JsonRouteWrapper/JsonApiButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAG9D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAejD,CAAA"}

package/dist/esm/components/JsonRouteWrapper/JsonApiButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonEx } from '@xylabs/react-button';
+import { useSearchParams } from 'react-router-dom';
+export const JsonApiButton = (props) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    return (_jsx(ButtonEx, { marginX: 2, variant: "outlined", onClick: () => {
+            searchParams.set('json', 'true');
+            setSearchParams(searchParams);
+        }, ...props, children: "JSON" }));
+};
+//# sourceMappingURL=JsonApiButton.js.map

package/dist/esm/components/JsonRouteWrapper/JsonApiButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonApiButton.js","sourceRoot":"","sources":["../../../../src/components/JsonRouteWrapper/JsonApiButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAElD,MAAM,CAAC,MAAM,aAAa,GAA4B,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,eAAe,EAAE,CAAA;IACzD,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,EACV,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,GAAG,EAAE;YACZ,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;YAChC,eAAe,CAAC,YAAY,CAAC,CAAA;QAC/B,CAAC,KACG,KAAK,qBAGA,CACZ,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { ReactJsonViewProps } from 'react-json-view';
+export interface JsonFromPromiseProps extends FlexBoxProps {
+    callback: () => Promise<object | undefined>;
+    noBackButton?: boolean;
+    noJsonButton?: boolean;
+    jsonViewProps?: ReactJsonViewProps;
+}
+export declare const JsonRouteWrapper: React.FC<JsonFromPromiseProps>;
+//# sourceMappingURL=JsonRouteWrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JsonRouteWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/JsonRouteWrapper/JsonRouteWrapper.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAItE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAOpD,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,QAAQ,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,kBAAkB,CAAA;CACnC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgE3D,CAAA"}

package/dist/esm/components/JsonRouteWrapper/JsonRouteWrapper.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonEx } from '@xylabs/react-button';
+import { ErrorDialog } from '@xylabs/react-dialogs';
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox';
+import { useAsyncEffect } from '@xylabs/react-shared';
+import { lazy, Suspense, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { JsonApiButton } from './JsonApiButton';
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'));
+export const JsonRouteWrapper = ({ callback, children, noBackButton = false, noJsonButton = false, jsonViewProps, ...props }) => {
+    const [apiResponse, setApiResponse] = useState();
+    const [apiError, setApiError] = useState();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const active = !!searchParams.get('json');
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+        try {
+            const response = await callback();
+            if (mounted()) {
+                setApiResponse(response);
+            }
+        }
+        catch (ex) {
+            if (mounted()) {
+                const error = ex;
+                if (error.isXyoError) {
+                    setApiError(error);
+                }
+                else {
+                    throw ex;
+                }
+            }
+        }
+    }, [callback]);
+    return (_jsx(FlexCol, { ...props, children: active ? (_jsxs(_Fragment, { children: [_jsx(Suspense, { fallback: null, children: apiResponse && _jsx(JsonView, { src: apiResponse, collapseStringsAfterLength: 64, ...jsonViewProps }) }), !noBackButton && (_jsx(FlexRow, { marginY: 3, children: _jsx(ButtonEx, { flexDirection: "row", variant: "outlined", onClick: () => {
+                            searchParams.delete('json');
+                            setSearchParams(searchParams);
+                        }, children: "Back" }) })), _jsx(ErrorDialog, { title: "Error Fetching JSON", error: apiError, open: !!apiError, onAction: () => setApiError(undefined) })] })) : (_jsxs(_Fragment, { children: [children, !noJsonButton && _jsx(JsonApiButton, { marginTop: 2 })] })) }));
+};
+//# sourceMappingURL=JsonRouteWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JsonRouteWrapper.js","sourceRoot":"","sources":["../../../../src/components/JsonRouteWrapper/JsonRouteWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAgB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,kCAAkC,CAAC,iBAAiB,CAAC,CAAC,CAAA;AASzF,MAAM,CAAC,MAAM,gBAAgB,GAAmC,CAAC,EAC/D,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,KAAK,EACpB,aAAa,EACb,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAU,CAAA;IACxD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAe,CAAA;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,eAAe,EAAE,CAAA;IACzD,MAAM,MAAM,GAAG,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAEzC,cAAc;IACZ,uDAAuD;IACvD,KAAK,EAAE,OAAO,EAAE,EAAE;QAChB,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,QAAQ,EAAE,CAAA;YACjC,IAAI,OAAO,EAAE,EAAE;gBACb,cAAc,CAAC,QAAQ,CAAC,CAAA;aACzB;SACF;QAAC,OAAO,EAAE,EAAE;YACX,IAAI,OAAO,EAAE,EAAE;gBACb,MAAM,KAAK,GAAG,EAAiB,CAAA;gBAC/B,IAAI,KAAK,CAAC,UAAU,EAAE;oBACpB,WAAW,CAAC,KAAK,CAAC,CAAA;iBACnB;qBAAM;oBACL,MAAM,EAAE,CAAA;iBACT;aACF;SACF;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,YACf,MAAM,CAAC,CAAC,CAAC,CACR,8BACE,KAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,YAAG,WAAW,IAAI,KAAC,QAAQ,IAAC,GAAG,EAAE,WAAW,EAAE,0BAA0B,EAAE,EAAE,KAAM,aAAa,GAAI,GAAY,EACtI,CAAC,YAAY,IAAI,CAChB,KAAC,OAAO,IAAC,OAAO,EAAE,CAAC,YACjB,KAAC,QAAQ,IACP,aAAa,EAAC,KAAK,EACnB,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,GAAG,EAAE;4BACZ,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;4BAC3B,eAAe,CAAC,YAAY,CAAC,CAAA;wBAC/B,CAAC,qBAGQ,GACH,CACX,EACD,KAAC,WAAW,IAAC,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,GAAI,IACrH,CACJ,CAAC,CAAC,CAAC,CACF,8BACG,QAAQ,EACR,CAAC,YAAY,IAAI,KAAC,aAAa,IAAC,SAAS,EAAE,CAAC,GAAI,IAChD,CACJ,GACO,CACX,CAAA;AACH,CAAC,CAAA"}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { XyoApiError } from '@xyo-network/api';
+import { PropsWithChildren } from 'react';
+export interface HandleItemDetailLoadingProps<T> {
+    apiError: Error | XyoApiError | undefined;
+    notFound: boolean;
+    searchResult: T | undefined;
+}
+export declare function ResultLoader<T>(props: PropsWithChildren<HandleItemDetailLoadingProps<T>>): JSX.Element;
+//# sourceMappingURL=ResultLoader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResultLoader.d.ts","sourceRoot":"","sources":["../../../src/components/ResultLoader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,MAAM,WAAW,4BAA4B,CAAC,CAAC;IAC7C,QAAQ,EAAE,KAAK,GAAG,WAAW,GAAG,SAAS,CAAA;IACzC,QAAQ,EAAE,OAAO,CAAA;IACjB,YAAY,EAAE,CAAC,GAAG,SAAS,CAAA;CAC5B;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,eAcxF"}

package/dist/esm/components/ResultLoader.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { FlexGrowRow } from '@xylabs/react-flexbox';
+import { NotFound } from '@xyo-network/react-shared';
+export function ResultLoader(props) {
+    const { notFound, apiError, searchResult, children } = props;
+    if (notFound) {
+        return _jsx(NotFound, {});
+    }
+    // Defer error handling to the children
+    if (apiError) {
+        return _jsx(_Fragment, { children: children });
+    }
+    if (searchResult === undefined) {
+        return _jsx(FlexGrowRow, { busy: true, minHeight: "50px" });
+    }
+    else {
+        return _jsx(_Fragment, { children: children });
+    }
+}
+//# sourceMappingURL=ResultLoader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResultLoader.js","sourceRoot":"","sources":["../../../src/components/ResultLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AASpD,MAAM,UAAU,YAAY,CAAI,KAAyD;IACvF,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC5D,IAAI,QAAQ,EAAE;QACZ,OAAO,KAAC,QAAQ,KAAG,CAAA;KACpB;IACD,uCAAuC;IACvC,IAAI,QAAQ,EAAE;QACZ,OAAO,4BAAG,QAAQ,GAAI,CAAA;KACvB;IACD,IAAI,YAAY,KAAK,SAAS,EAAE;QAC9B,OAAO,KAAC,WAAW,IAAC,IAAI,QAAC,SAAS,EAAC,MAAM,GAAG,CAAA;KAC7C;SAAM;QACL,OAAO,4BAAG,QAAQ,GAAI,CAAA;KACvB;AACH,CAAC"}

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

@@ -0,0 +1,4 @@
+export * from './ApiErrorAlert';
+export * from './JsonRouteWrapper';
+export * from './ResultLoader';
+//# 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,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA"}

package/dist/esm/components/index.js

@@ -0,0 +1,4 @@
+export * from './ApiErrorAlert';
+export * from './JsonRouteWrapper';
+export * from './ResultLoader';
+//# 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,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,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,75 @@
+{
+  "name": "@xyo-network/react-api",
+  "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": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/material": "^5.10.3",
+    "@xylabs/react-button": "^2.14.14",
+    "@xylabs/react-dialogs": "^2.14.14",
+    "@xylabs/react-flexbox": "^2.14.14",
+    "@xylabs/react-shared": "^2.14.14",
+    "@xyo-network/react-shared": "^2.32.0-rc.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-json-view": "^1.21.3",
+    "react-router-dom": "^6.3.0",
+    "tslib": "^2.4.0"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "devDependencies": {
+    "@xyo-network/api": "^2.30.0-rc.3"
+  },
+  "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.7",
+  "stableVersion": "2.31.3"
+}

package/src/components/ApiErrorAlert.tsx

@@ -0,0 +1,21 @@
+import { Alert, AlertProps, AlertTitle, Typography } from '@mui/material'
+import { XyoApiError } from '@xyo-network/api'
+
+export interface ApiErrorAlertProps extends AlertProps {
+  call?: XyoApiError
+}
+
+const ApiErrorAlert: React.FC<ApiErrorAlertProps> = ({ call, ...props }) => {
+  return (
+    <Alert severity="error" {...props}>
+      <AlertTitle>Whoops! Something went wrong</AlertTitle>
+      <Typography sx={{ wordBreak: 'break-all' }}>{call?.config?.url}</Typography>
+      <Typography variant="caption" mr={0.5} fontWeight="bold">
+        Error:
+      </Typography>
+      <Typography variant="caption">{call?.message}</Typography>
+    </Alert>
+  )
+}
+
+export { ApiErrorAlert }

package/src/components/JsonRouteWrapper/JsonApiButton.tsx

@@ -0,0 +1,19 @@
+import { ButtonEx, ButtonExProps } from '@xylabs/react-button'
+import { useSearchParams } from 'react-router-dom'
+
+export const JsonApiButton: React.FC<ButtonExProps> = (props) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  return (
+    <ButtonEx
+      marginX={2}
+      variant="outlined"
+      onClick={() => {
+        searchParams.set('json', 'true')
+        setSearchParams(searchParams)
+      }}
+      {...props}
+    >
+      JSON
+    </ButtonEx>
+  )
+}

package/src/components/JsonRouteWrapper/JsonRouteWrapper.stories.tsx

@@ -0,0 +1,68 @@
+import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { XyoArchivistApi } from '@xyo-network/api'
+import { BrowserRouter, useSearchParams } from 'react-router-dom'
+
+import { JsonRouteWrapper } from './JsonRouteWrapper'
+
+const JsonDecorator: DecoratorFn = (Story) => (
+  <BrowserRouter>
+    <Story />
+  </BrowserRouter>
+)
+
+const StorybookEntry = {
+  argTypes: {
+    apiDomain: 'https://beta.api.archivist.xyo.network',
+  },
+  component: JsonRouteWrapper,
+  decorators: [JsonDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/JsonRouteWrapper',
+} as ComponentMeta<typeof JsonRouteWrapper>
+
+const Template: ComponentStory<typeof JsonRouteWrapper> = (props) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const activeJson = searchParams.get('json')
+  return (
+    <FlexCol>
+      <ButtonEx
+        marginY={3}
+        onClick={() => {
+          activeJson === 'true' ? searchParams.delete('json') : searchParams.set('json', 'true')
+          setSearchParams(searchParams)
+        }}
+        variant="outlined"
+      >
+        Toggle JSON Page
+      </ButtonEx>
+      <JsonRouteWrapper {...props}></JsonRouteWrapper>
+    </FlexCol>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {
+  callback: () => new XyoArchivistApi({ apiDomain: 'https://beta.api.archivist.xyo.network' }).archive('temp').block.stats.get(),
+}
+
+const HideBackButton = Template.bind({})
+HideBackButton.args = {
+  callback: () =>
+    new XyoArchivistApi({
+      apiDomain: 'https://beta.api.archivist.xyo.network',
+    })
+      .archive('temp')
+      .block.stats.get(),
+  noBackButton: true,
+}
+
+export { Default, HideBackButton }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/JsonRouteWrapper/JsonRouteWrapper.tsx

@@ -0,0 +1,85 @@
+import { ButtonEx } from '@xylabs/react-button'
+import { ErrorDialog } from '@xylabs/react-dialogs'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoApiError } from '@xyo-network/api'
+import { lazy, Suspense, useState } from 'react'
+import { ReactJsonViewProps } from 'react-json-view'
+import { useSearchParams } from 'react-router-dom'
+
+import { JsonApiButton } from './JsonApiButton'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+export interface JsonFromPromiseProps extends FlexBoxProps {
+  callback: () => Promise<object | undefined>
+  noBackButton?: boolean
+  noJsonButton?: boolean
+  jsonViewProps?: ReactJsonViewProps
+}
+
+export const JsonRouteWrapper: React.FC<JsonFromPromiseProps> = ({
+  callback,
+  children,
+  noBackButton = false,
+  noJsonButton = false,
+  jsonViewProps,
+  ...props
+}) => {
+  const [apiResponse, setApiResponse] = useState<object>()
+  const [apiError, setApiError] = useState<XyoApiError>()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const active = !!searchParams.get('json')
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      try {
+        const response = await callback()
+        if (mounted()) {
+          setApiResponse(response)
+        }
+      } catch (ex) {
+        if (mounted()) {
+          const error = ex as XyoApiError
+          if (error.isXyoError) {
+            setApiError(error)
+          } else {
+            throw ex
+          }
+        }
+      }
+    },
+    [callback],
+  )
+
+  return (
+    <FlexCol {...props}>
+      {active ? (
+        <>
+          <Suspense fallback={null}>{apiResponse && <JsonView src={apiResponse} collapseStringsAfterLength={64} {...jsonViewProps} />}</Suspense>
+          {!noBackButton && (
+            <FlexRow marginY={3}>
+              <ButtonEx
+                flexDirection="row"
+                variant="outlined"
+                onClick={() => {
+                  searchParams.delete('json')
+                  setSearchParams(searchParams)
+                }}
+              >
+                Back
+              </ButtonEx>
+            </FlexRow>
+          )}
+          <ErrorDialog title="Error Fetching JSON" error={apiError} open={!!apiError} onAction={() => setApiError(undefined)} />
+        </>
+      ) : (
+        <>
+          {children}
+          {!noJsonButton && <JsonApiButton marginTop={2} />}
+        </>
+      )}
+    </FlexCol>
+  )
+}

package/src/components/JsonRouteWrapper/index.ts

@@ -0,0 +1,2 @@
+export * from './JsonApiButton'
+export * from './JsonRouteWrapper'

package/src/components/ResultLoader.stories.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable import/no-internal-modules */
+import { ComponentStory, Meta } from '@storybook/react'
+import { AxiosError } from 'axios'
+
+import { ResultLoader } from './ResultLoader'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: ResultLoader,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'webapp/ResultLoader',
+}
+
+const Template: ComponentStory<typeof ResultLoader> = (props) => {
+  return <ResultLoader {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const NotFound = Template.bind({})
+NotFound.args = { notFound: true }
+
+const ApiError = Template.bind({})
+ApiError.args = { apiError: new AxiosError(), children: <h1>Shown in case of error</h1> }
+
+const SearchResult = Template.bind({})
+SearchResult.args = { children: <h1>Shown when there is a valid result</h1>, searchResult: 'foo' }
+
+export { ApiError, Default, NotFound, SearchResult }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/ResultLoader.tsx

@@ -0,0 +1,26 @@
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { XyoApiError } from '@xyo-network/api'
+import { NotFound } from '@xyo-network/react-shared'
+import { PropsWithChildren } from 'react'
+
+export interface HandleItemDetailLoadingProps<T> {
+  apiError: Error | XyoApiError | undefined
+  notFound: boolean
+  searchResult: T | undefined
+}
+
+export function ResultLoader<T>(props: PropsWithChildren<HandleItemDetailLoadingProps<T>>) {
+  const { notFound, apiError, searchResult, children } = props
+  if (notFound) {
+    return <NotFound />
+  }
+  // Defer error handling to the children
+  if (apiError) {
+    return <>{children}</>
+  }
+  if (searchResult === undefined) {
+    return <FlexGrowRow busy minHeight="50px" />
+  } else {
+    return <>{children}</>
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './ApiErrorAlert'
+export * from './JsonRouteWrapper'
+export * from './ResultLoader'

package/src/index.ts

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