@xyo-network/react-api 2.38.18 → 2.39.0-rc.1

package/dist/esm/hooks/useResolveHuri.js

@@ -1,20 +1,21 @@
 import { useAsyncEffect } from '@xylabs/react-shared';
+import { XyoErrorSchema } from '@xyo-network/module';
 import { Huri } from '@xyo-network/payload';
 import { useNetwork } from '@xyo-network/react-network';
 import { useEffect, useState } from 'react';
 import { findHuriNetwork } from './lib';
-const useResolveHuri = (huriUri, dependentNotFound, options) => {
+export const useResolveHuri = (huriUri, dependentNotFound, options) => {
     const { network, networks, setNetwork } = useNetwork();
     const [huriPayload, setHuriPayload] = useState();
     const [huriPayloadNotFound, setHuriPayloadNotFound] = useState();
     const [huriNetworkNotFound, setHuriNetworkNotFound] = useState();
-    const [huriApiError, setHuriApiError] = useState();
+    const [huriError, setHuriError] = useState();
     const { changeActiveNetwork } = options ?? {};
     //AT: TODO -> Talk about this pattern
     const reset = () => {
         setHuriPayload(undefined);
         setHuriPayloadNotFound(undefined);
-        setHuriApiError(undefined);
+        setHuriError(undefined);
     };
     useEffect(() => {
         // Initially, sync local not found with dependent's status
@@ -46,10 +47,11 @@ const useResolveHuri = (huriUri, dependentNotFound, options) => {
                     }
                 }
                 catch (e) {
+                    const error = e;
                     if (mounted()) {
                         setHuriPayloadNotFound(false);
                         setHuriPayload(undefined);
-                        setHuriApiError(e);
+                        setHuriError({ message: error.message, schema: XyoErrorSchema, sources: [] });
                     }
                 }
             }
@@ -58,7 +60,6 @@ const useResolveHuri = (huriUri, dependentNotFound, options) => {
             }
         }
     }, [huriUri, network, networks, dependentNotFound, setNetwork, changeActiveNetwork]);
-    return [huriPayload, huriPayloadNotFound, huriApiError, huriNetworkNotFound];
+    return [huriPayload, huriPayloadNotFound, huriError, huriNetworkNotFound];
 };
-export { useResolveHuri };
 //# sourceMappingURL=useResolveHuri.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useResolveHuri.js","sourceRoot":"","sources":["../../../src/hooks/useResolveHuri.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,IAAI,EAAc,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAwB,eAAe,EAAE,MAAM,OAAO,CAAA;AAG7D,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,iBAA2B,EAAE,OAA8B,EAAiB,EAAE;IACtH,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,CAAA;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAc,CAAA;IAC5D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,EAAW,CAAA;IACzE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,EAAW,CAAA;IACzE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAe,CAAA;IAE/D,MAAM,EAAE,mBAAmB,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;IAE7C,qCAAqC;IACrC,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,cAAc,CAAC,SAAS,CAAC,CAAA;QACzB,sBAAsB,CAAC,SAAS,CAAC,CAAA;QACjC,eAAe,CAAC,SAAS,CAAC,CAAA;IAC5B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,0DAA0D;QAC1D,sBAAsB,CAAC,iBAAiB,CAAC,CAAA;IAC3C,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAEvB,cAAc;IACZ,uDAAuD;IACvD,KAAK,EAAE,OAAO,EAAE,EAAE;QAChB,6FAA6F;QAC7F,IAAI,iBAAiB,IAAI,OAAO,EAAE;YAChC,KAAK,EAAE,CAAA;YACP,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAA;YAEtC,MAAM,gBAAgB,GAAG,eAAe,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;YAEhE,IAAI,gBAAgB,IAAI,OAAO,EAAE,EAAE;gBACjC,IAAI,OAAO,KAAK,gBAAgB,IAAI,mBAAmB,EAAE;oBACvD,UAAU,EAAE,CAAC,gBAAgB,CAAC,CAAA;oBAC9B,OAAM;iBACP;gBAED,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;4BAC3B,sBAAsB,CAAC,KAAK,CAAC,CAAA;yBAC9B;6BAAM;4BACL,sBAAsB,CAAC,IAAI,CAAC,CAAA;yBAC7B;qBACF;iBACF;gBAAC,OAAO,CAAC,EAAE;oBACV,IAAI,OAAO,EAAE,EAAE;wBACb,sBAAsB,CAAC,KAAK,CAAC,CAAA;wBAC7B,cAAc,CAAC,SAAS,CAAC,CAAA;wBACzB,eAAe,CAAC,CAAgB,CAAC,CAAA;qBAClC;iBACF;aACF;iBAAM;gBACL,sBAAsB,CAAC,IAAI,CAAC,CAAA;aAC7B;SACF;IACH,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,EAAE,mBAAmB,CAAC,CACjF,CAAA;IAED,OAAO,CAAC,WAAW,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,CAAC,CAAA;AAC9E,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"useResolveHuri.js","sourceRoot":"","sources":["../../../src/hooks/useResolveHuri.tsx"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -1,3 +1,6 @@
+export * from './archive';
+export * from './archives';
 export * from './components';
+export * from './contexts';
 export * from './hooks';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/esm/index.js

@@ -1,3 +1,6 @@
+export * from './archive';
+export * from './archives';
 export * from './components';
+export * from './contexts';
 export * from './hooks';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/package.json

@@ -14,11 +14,10 @@
     "@xylabs/react-dialogs": "^2.15.1",
     "@xylabs/react-flexbox": "^2.15.1",
     "@xylabs/react-shared": "^2.15.1",
-    "@xyo-network/api": "^2.38.23",
-    "@xyo-network/react-archive": "^2.38.18",
-    "@xyo-network/react-archivist-api": "^2.38.18",
-    "@xyo-network/react-network": "^2.38.18",
-    "@xyo-network/react-shared": "^2.38.18",
+    "@xyo-network/react-archivist": "^2.39.0-rc.1",
+    "@xyo-network/react-network": "^2.39.0-rc.1",
+    "@xyo-network/react-shared": "^2.39.0-rc.1",
+    "lodash": "^4.17.21",
     "react-json-view": "^1.21.3",
     "tslib": "^2.4.0"
   },
@@ -26,15 +25,26 @@
     "@mui/icons-material": "^5.10.3",
     "@mui/material": "^5.10.3",
     "@mui/styles": "^5.10.3",
+    "@xylabs/react-common": "^2.15.1",
+    "@xylabs/sdk-js": "^2.6.9",
+    "@xyo-network/api": "*",
+    "@xyo-network/archivist": "*",
+    "@xyo-network/diviner": "*",
     "@xyo-network/module": "*",
     "@xyo-network/network": "*",
     "@xyo-network/payload": "*",
+    "@xyo-network/utils": "*",
     "axios": "^1.1.3",
-    "lodash": "^4.17.21",
     "pako": "^2.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "rollbar": "^2.25.2"
+  },
+  "peerDependenciesMeta": {
+    "rollbar": {
+      "optional": true
+    }
   },
   "description": "Common React library for all XYO projects that use React",
   "browser": "dist/esm/index.js",
@@ -79,5 +89,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.38.18"
+  "version": "2.39.0-rc.1",
+  "stableVersion": "2.38.18"
 }

package/src/archive/components/ArchiveSelectEx.stories.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable import/no-internal-modules */
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { SelectExProps } from '@xylabs/react-common'
+import { WithChildren } from '@xylabs/react-shared'
+import { XyoArchive } from '@xyo-network/api'
+import { authDecorator, WrappedArgs } from '@xyo-network/react-storybook'
+import { useState } from 'react'
+
+import { ArchivesContext } from '../../archives'
+import { ApiProvider } from '../../contexts'
+import { ArchiveContext } from '../contexts'
+import { ArchiveSelectEx } from './ArchiveSelectEx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ArchiveSelectEx,
+  decorators: [authDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'archive/ArchiveSelectEx',
+} as ComponentMeta<typeof ArchiveSelectEx>
+
+const veryLongArchiveName = 'some-very-very-long-archive-name-that-should-be-truncated'
+const temp = 'temp'
+
+const FakeArchivesProvider: React.FC<WithChildren> = ({ children }) => {
+  const archives: XyoArchive[] = [
+    {
+      accessControl: false,
+      archive: veryLongArchiveName,
+      user: '0x2345',
+    },
+    {
+      accessControl: false,
+      archive: 'temp',
+      user: '0x2345',
+    },
+  ]
+  return <ArchivesContext.Provider value={{ archives, provided: true }}>{children}</ArchivesContext.Provider>
+}
+
+const FakeArchiveProvider: React.FC<WithChildren> = ({ children }) => {
+  const [archive, setArchive] = useState(temp)
+  return <ArchiveContext.Provider value={{ archive, provided: true, setArchive }}>{children}</ArchiveContext.Provider>
+}
+
+const Template: ComponentStory<typeof ArchiveSelectEx> = (args) => {
+  const combinedArgs = args as WrappedArgs & SelectExProps<string>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { authState, ...props } = combinedArgs
+  return (
+    <ApiProvider apiDomain="https://beta.api.archivist.xyo.network">
+      <FakeArchivesProvider>
+        <FakeArchiveProvider>
+          <ArchiveSelectEx {...props}></ArchiveSelectEx>
+        </FakeArchiveProvider>
+      </FakeArchivesProvider>
+    </ApiProvider>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/archive/components/ArchiveSelectEx.tsx

@@ -0,0 +1,41 @@
+import { MenuItem, Theme, useMediaQuery } from '@mui/material'
+import { SelectEx, SelectExProps } from '@xylabs/react-common'
+
+import { useArchives } from '../../archives'
+import { useArchive } from '../contexts'
+
+export const ArchiveSelectEx: React.FC<SelectExProps<string>> = ({ onChange, ...props }) => {
+  const { archives } = useArchives()
+  const { archive, setArchive } = useArchive()
+  const isMedium = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'))
+
+  const archivesList = [...(archives?.map((archive) => archive.archive) ?? [])]
+
+  if (archive && !archives?.find((value) => value.archive === archive)) {
+    archivesList.push(archive)
+  }
+
+  return (
+    <SelectEx
+      variant="outlined"
+      size="small"
+      sx={{ maxWidth: isMedium ? '100px' : '300px' }}
+      value={archive ?? ''}
+      onChange={(event, child) => {
+        if (event.target.value !== archive) {
+          setArchive?.(event.target.value)
+          onChange?.(event, child)
+        }
+      }}
+      {...props}
+    >
+      {archivesList.map((archive) => {
+        return (
+          <MenuItem key={archive} value={archive}>
+            {archive}
+          </MenuItem>
+        )
+      })}
+    </SelectEx>
+  )
+}

package/src/archive/components/index.ts

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

package/src/archive/contexts/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { ArchiveContextState } from './State'
+
+export const ArchiveContext = createContextEx<ArchiveContextState>()

package/src/archive/contexts/Provider.tsx

@@ -0,0 +1,14 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { useState } from 'react'
+
+import { ArchiveContext } from './Context'
+
+export interface ArchiveProviderProps {
+  defaultArchive?: string
+}
+
+export const ArchiveProvider: React.FC<WithChildren<ArchiveProviderProps>> = ({ defaultArchive, ...props }) => {
+  const [archive, setArchive] = useState<string>()
+
+  return <ArchiveContext.Provider value={{ archive: archive ?? defaultArchive, provided: true, setArchive }} {...props} />
+}

package/src/archive/contexts/State.ts

@@ -0,0 +1,7 @@
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch } from 'react'
+
+export interface ArchiveContextState extends ContextExState {
+  archive?: string
+  setArchive?: Dispatch<string>
+}

package/src/archive/contexts/index.ts

@@ -0,0 +1,4 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/archive/contexts/use.ts

@@ -0,0 +1,7 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { ArchiveContext } from './Context'
+
+export const useArchive = (required = false) => {
+  return useContextEx(ArchiveContext, 'Archive', required)
+}

package/src/archive/index.ts

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

package/src/archives/contexts/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { ArchivesContextState } from './State'
+
+export const ArchivesContext = createContextEx<ArchivesContextState>()

package/src/archives/contexts/ListDiviner/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { ArchiveListApiDivinerState } from './State'
+
+export const ArchiveListApiDivinerContext = createContextEx<ArchiveListApiDivinerState>()

package/src/archives/contexts/ListDiviner/Provider.tsx

@@ -0,0 +1,36 @@
+import { useAsyncEffect, WithChildren } from '@xylabs/react-shared'
+import { ArchiveListApiDiviner } from '@xyo-network/api'
+import { ContextExProviderProps } from '@xyo-network/react-shared'
+import { useState } from 'react'
+
+import { useApi } from '../../../contexts'
+import { ArchiveListApiDivinerContext } from './Context'
+
+export const ArchiveListApiDivinerProvider: React.FC<WithChildren<ContextExProviderProps>> = ({ children, required = false }) => {
+  const { api } = useApi()
+  const [diviner, setDiviner] = useState<ArchiveListApiDiviner>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (api) {
+        const diviner = await ArchiveListApiDiviner.create({
+          api,
+          config: {
+            schema: ArchiveListApiDiviner.configSchema,
+          },
+        })
+        if (mounted()) {
+          setDiviner?.(diviner)
+        }
+      }
+    },
+    [api, setDiviner],
+  )
+
+  return (
+    <ArchiveListApiDivinerContext.Provider value={{ diviner, provided: true, setDiviner }}>
+      {diviner ? children : required ? null : children}
+    </ArchiveListApiDivinerContext.Provider>
+  )
+}

package/src/archives/contexts/ListDiviner/State.ts

@@ -0,0 +1,8 @@
+import { ArchiveListApiDiviner } from '@xyo-network/api'
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch, SetStateAction } from 'react'
+
+export interface ArchiveListApiDivinerState extends ContextExState {
+  diviner?: ArchiveListApiDiviner
+  setDiviner?: Dispatch<SetStateAction<ArchiveListApiDiviner | undefined>>
+}

package/src/archives/contexts/ListDiviner/index.ts

@@ -0,0 +1,5 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'
+export * from './useDiviner'

package/src/archives/contexts/ListDiviner/use.tsx

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { ArchiveListApiDivinerContext } from './Context'
+
+export const useArchiveListApiDiviner = (required?: boolean) => useContextEx(ArchiveListApiDivinerContext, 'ArchiveListApiDiviner', required)

package/src/archives/contexts/ListDiviner/useDiviner.tsx

@@ -0,0 +1,34 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { ArchiveList } from '@xyo-network/api'
+import { XyoDivinerWrapper } from '@xyo-network/diviner'
+import { useState } from 'react'
+
+import { useArchiveListApiDiviner } from './use'
+
+export const useDivineArchiveList = (): [ArchiveList[] | undefined, Error | undefined, () => void] => {
+  const [archiveList, setArchiveList] = useState<ArchiveList[]>()
+  const [error, setError] = useState<Error>()
+  const { diviner } = useArchiveListApiDiviner()
+  const [refresh, setRefresh] = useState(1)
+
+  const refreshArchiveList = () => setRefresh((previous) => previous + 1)
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (diviner) {
+        try {
+          const result = (await new XyoDivinerWrapper(diviner).divine()) as ArchiveList[]
+          if (mounted() && result) {
+            setArchiveList(result)
+          }
+        } catch (e) {
+          setError(e as Error)
+        }
+      }
+    },
+    [diviner, refresh],
+  )
+
+  return [archiveList, error, refreshArchiveList]
+}

package/src/archives/contexts/Provider.tsx

@@ -0,0 +1,28 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { XyoArchive } from '@xyo-network/api'
+import { useEffect, useState } from 'react'
+
+import { ArchivesContext } from './Context'
+import { ArchiveListApiDivinerProvider, useDivineArchiveList } from './ListDiviner'
+
+export const ArchivesProviderInner: React.FC<WithChildren> = ({ children }) => {
+  const [archives, setArchives] = useState<XyoArchive[]>([{ archive: 'temp' }])
+
+  const [archiveList, error, refreshList] = useDivineArchiveList()
+
+  useEffect(() => {
+    if (archiveList?.length) {
+      setArchives(archiveList.map((archive) => archive.archive))
+    }
+  }, [archiveList])
+
+  return <ArchivesContext.Provider value={{ archives, error, provided: true, refreshList, setArchives }}>{children}</ArchivesContext.Provider>
+}
+
+export const ArchivesProvider: React.FC<WithChildren> = ({ children }) => {
+  return (
+    <ArchiveListApiDivinerProvider>
+      <ArchivesProviderInner>{children}</ArchivesProviderInner>
+    </ArchiveListApiDivinerProvider>
+  )
+}

package/src/archives/contexts/State.ts

@@ -0,0 +1,12 @@
+import { XyoArchive } from '@xyo-network/api'
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch } from 'react'
+
+export interface ArchivesContextState extends ContextExState {
+  archives?: XyoArchive[]
+  setArchives?: Dispatch<XyoArchive[]>
+  /** @deprecated */
+  refresh?: (mounted: () => boolean) => Promise<void>
+  refreshList?: () => void
+  error?: Error
+}

package/src/archives/contexts/index.ts

@@ -0,0 +1,4 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/archives/contexts/use.ts

@@ -0,0 +1,7 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { ArchivesContext } from './Context'
+
+export const useArchives = (required = false) => {
+  return useContextEx(ArchivesContext, 'Archives', required)
+}

package/src/archives/index.ts

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

package/src/components/ApiHistory/ApiCallEntry.stories.tsx

@@ -0,0 +1,54 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { XyoApiResponse } from '@xyo-network/api'
+
+import { ApiCallEntry } from './ApiCallEntry'
+
+const StorybookEntry = {
+  argTypes: {
+    authServiceList: [],
+  },
+  component: ApiCallEntry,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'archivist-api/ApiHistory/ApiCallEntry',
+} as ComponentMeta<typeof ApiCallEntry>
+
+const Template: ComponentStory<typeof ApiCallEntry> = ({ ...props }) => {
+  return <ApiCallEntry {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = {
+  call: {
+    code: 400,
+    config: {
+      method: 'post',
+      url: 'https://some400.com',
+    },
+    isXyoError: true,
+    message: 'Bad Request',
+  } as unknown as XyoApiResponse,
+  index: 1,
+}
+
+const Success = Template.bind({})
+Success.args = {
+  call: {
+    config: {
+      method: 'post',
+      url: 'https://some200.com',
+    },
+    isXyoError: false,
+    status: 200,
+    statusText: 'Success',
+  } as unknown as XyoApiResponse,
+  index: 2,
+}
+
+export { Default, Success }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/ApiHistory/ApiCallEntry.tsx

@@ -0,0 +1,39 @@
+import { TableCell, TableRow, Typography } from '@mui/material'
+import { XyoApiError, XyoApiResponse } from '@xyo-network/api'
+
+export interface ApiCallEntryProps {
+  call: XyoApiResponse | XyoApiError
+  index: number
+  bgColor?: string
+}
+
+const ApiCallEntry: React.FC<ApiCallEntryProps> = ({ call, bgColor, index }) => {
+  const formatCall = (call: ApiCallEntryProps['call']) => {
+    if ((call as XyoApiError).isXyoError) {
+      const error = call as XyoApiError
+      return `${error.code} - ${error.message}`
+    } else {
+      const response = call as XyoApiResponse
+      return `${response.status} ${response.statusText ? `- ${response.statusText}` : ''}`
+    }
+  }
+
+  return (
+    <TableRow>
+      <TableCell sx={{ backgroundColor: bgColor }}>
+        <Typography variant="caption">{index + 1}.</Typography>
+      </TableCell>
+      <TableCell sx={{ backgroundColor: bgColor }}>
+        <Typography variant="caption">{call.config?.method?.toUpperCase()}</Typography>
+      </TableCell>
+      <TableCell sx={{ backgroundColor: bgColor }}>
+        <Typography variant="caption">{formatCall(call)}</Typography>
+      </TableCell>
+      <TableCell sx={{ backgroundColor: bgColor }}>
+        <Typography variant="caption">{call.config?.url}</Typography>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+export { ApiCallEntry }

package/src/components/ApiHistory/ApiCallTable.tsx

@@ -0,0 +1,29 @@
+import { Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { WithChildren } from '@xylabs/react-shared'
+
+const ApiCallTable: React.FC<WithChildren<FlexBoxProps>> = ({ children, ...props }) => {
+  return (
+    <FlexRow flexGrow={1} {...props}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell />
+            <TableCell>
+              <Typography variant="caption">HTTP Method</Typography>
+            </TableCell>
+            <TableCell>
+              <Typography variant="caption">Status</Typography>
+            </TableCell>
+            <TableCell>
+              <Typography variant="caption">URL</Typography>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>{children}</TableBody>
+      </Table>
+    </FlexRow>
+  )
+}
+
+export { ApiCallTable }