@xyo-network/react-embed 2.27.28 → 2.27.31

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

@@ -1,3 +1,4 @@
+export * from './ResolvePayloadContext';
 export * from './ValidatePayloadContext';
 export * from './XyoEmbedPluginContext';
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/esm/contexts/index.js

@@ -1,3 +1,4 @@
+export * from './ResolvePayloadContext';
 export * from './ValidatePayloadContext';
 export * from './XyoEmbedPluginContext';
 //# sourceMappingURL=index.js.map

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

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

package/dist/esm/types/XyoEmbedPluginProps.d.ts

@@ -0,0 +1,10 @@
+import { CardProps } from '@mui/material';
+import { XyoPayload } from '@xyo-network/payload';
+import { EmbedPluginVisibilityConfig, XyoEmbedPluginBase } from '../contexts';
+export interface XyoEmbedPluginProps extends XyoEmbedPluginBase, CardProps {
+    /** string for huri to resolve and payload for bypassing huri resolution */
+    huriPayload?: string | XyoPayload;
+    validateSchema?: boolean;
+    hideElementsConfig?: EmbedPluginVisibilityConfig;
+}
+//# sourceMappingURL=XyoEmbedPluginProps.d.ts.map

package/dist/esm/types/XyoEmbedPluginProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyoEmbedPluginProps.d.ts","sourceRoot":"","sources":["../../../src/types/XyoEmbedPluginProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,OAAO,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAE7E,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB,EAAE,SAAS;IACxE,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,2BAA2B,CAAA;CACjD"}

package/dist/esm/types/XyoEmbedPluginProps.js

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

package/dist/esm/types/XyoEmbedPluginProps.js.map

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

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

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

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

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

package/dist/esm/types/index.js

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

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

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

package/package.json

@@ -16,13 +16,13 @@
     "@mui/material": "^5.10.0",
     "@xylabs/react-flexbox": "^2.14.13",
     "@xylabs/react-shared": "^2.14.13",
-    "@xylabs/sdk-js": "^2.6.5",
+    "@xylabs/sdk-js": "^2.6.6",
     "@xyo-network/api": "^2.25.2",
     "@xyo-network/payload": "^2.25.2",
-    "@xyo-network/react-auth-service": "^2.27.30",
-    "@xyo-network/react-payload-plugin": "^2.27.30",
-    "@xyo-network/react-shared": "^2.27.30",
-    "@xyo-network/react-webapp": "^2.27.30",
+    "@xyo-network/react-auth-service": "^2.27.33",
+    "@xyo-network/react-payload-plugin": "^2.27.33",
+    "@xyo-network/react-shared": "^2.27.33",
+    "@xyo-network/react-webapp": "^2.27.33",
     "@xyo-network/utils": "^2.25.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -31,9 +31,9 @@
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
     "@storybook/react": "^6.5.10",
-    "@xylabs/tsconfig-dom": "^2.5.97",
-    "@xyo-network/react-aggregate-price-plugin": "^2.27.29",
-    "@xyo-network/react-crypto-market-uniswap-payload-plugin": "^2.27.30",
+    "@xylabs/tsconfig-dom": "^2.5.99",
+    "@xyo-network/react-aggregate-price-plugin": "^2.27.32",
+    "@xyo-network/react-crypto-market-uniswap-payload-plugin": "^2.27.33",
     "react-router-dom": "^6.3.0"
   },
   "browser": "dist/esm/index.js",
@@ -78,5 +78,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.27.28"
+  "version": "2.27.31"
 }

package/src/components/XyoEmbedPlugin.stories.tsx

@@ -4,9 +4,10 @@ import { UniswapPairsRenderPlugin } from '@xyo-network/react-crypto-market-unisw
 import { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
 import { BrowserRouter } from 'react-router-dom'
 
+import { payloadData } from './payload.stories'
 import { XyoEmbedPlugin } from './XyoEmbedPlugin'
 
-const AggregatePricePointer = 'https://api.archivist.xyo.network/9663b2f80395a9e7e95948fdd5988b778a4dcc047202bf67e855ff6cd459b8c0'
+const AggregatePricePointer = 'https://api.archivist.xyo.network/1948bf4eedf90ee2b8a1f63216b7c6b3b18d7bc2834330d85bcd6ab3d6428a20'
 const UniswapPairPointer = 'https://beta.api.archivist.xyo.network/e36602006239d86b6e08412f7879372b2c622d74f4d6bc508a08a46fa8ad6523'
 
 // eslint-disable-next-line import/no-default-export
@@ -47,23 +48,48 @@ Default.args = {
 
 const AggregatePriceExample = Template.bind({})
 AggregatePriceExample.args = {
-  huri: AggregatePricePointer,
+  huriPayload: AggregatePricePointer,
   plugins: [CryptoAssetRenderPlugin],
   timestampLabel: 'Last Updated - ',
 }
 
 const UniswapPairsExample = Template.bind({})
 UniswapPairsExample.args = {
-  huri: UniswapPairPointer,
+  huriPayload: UniswapPairPointer,
   plugins: [UniswapPairsRenderPlugin],
   timestampLabel: 'Last Updated - ',
 }
 
 const Error = Template.bind({})
 Error.args = {
-  huri: 'https://api.archivist.xyo.network/9663b2f80395a9e7e95948fdd5988b778a4dcc047202bf67e855ff6cd459b8c',
+  huriPayload: 'https://api.archivist.xyo.network/9663b2f80395a9e7e95948fdd5988b778a4dcc047202bf67e855ff6cd459b8c',
   plugins: [UniswapPairsRenderPlugin],
   timestampLabel: 'Last Updated - ',
 }
 
-export { AggregatePriceExample, Default, Error, UniswapPairsExample }
+const HiddenElements = Template.bind({})
+HiddenElements.args = {
+  hideElementsConfig: {
+    hideAvatar: true,
+    hideCardActions: true,
+    hideCardHeader: true,
+    hideRefreshButton: true,
+    hideTimestamp: true,
+    hideTitle: true,
+  },
+  huriPayload: AggregatePricePointer,
+  plugins: [CryptoAssetRenderPlugin],
+  timestampLabel: 'Last Updated - ',
+}
+
+const WithPassedPayload = Template.bind({})
+WithPassedPayload.args = {
+  hideElementsConfig: {
+    hideRefreshButton: true,
+  },
+  huriPayload: payloadData,
+  plugins: [CryptoAssetRenderPlugin],
+  timestampLabel: 'Last Updated - ',
+}
+
+export { AggregatePriceExample, Default, Error, HiddenElements, UniswapPairsExample, WithPassedPayload }

package/src/components/XyoEmbedPlugin.tsx

@@ -1,28 +1,38 @@
 import { ListModeProvider } from '@xyo-network/react-shared'
 
-import { ValidatePayloadProvider, XyoEmbedPluginProvider } from '../contexts'
+import { ResolvePayloadProvider, ValidatePayloadProvider, XyoEmbedPluginProvider } from '../contexts'
+import { XyoEmbedPluginProps } from '../types'
 import { EmbedPluginContainer, ValidatePayload, ValidatePlugins } from './embed-card'
-import { XyoEmbedPluginProps } from './XyoEmbedPluginProps'
 
 export const XyoEmbedPlugin: React.FC<XyoEmbedPluginProps> = ({
   validateSchema,
   plugins = [],
-  huri,
+  huriPayload,
   refreshTitle = '',
   timestampLabel = 'Data From',
+  hideElementsConfig,
+  embedPluginConfig,
   ...props
 }) => {
   return (
-    <XyoEmbedPluginProvider refreshTitle={refreshTitle} timestampLabel={timestampLabel} plugins={plugins} huri={huri}>
-      <ValidatePayloadProvider enabled={validateSchema}>
-        <ListModeProvider>
-          <ValidatePlugins>
-            <ValidatePayload>
-              <EmbedPluginContainer {...props} />
-            </ValidatePayload>
-          </ValidatePlugins>
-        </ListModeProvider>
-      </ValidatePayloadProvider>
-    </XyoEmbedPluginProvider>
+    <ResolvePayloadProvider huriPayload={huriPayload} {...props}>
+      <XyoEmbedPluginProvider
+        refreshTitle={refreshTitle}
+        timestampLabel={timestampLabel}
+        hideElementsConfig={hideElementsConfig}
+        plugins={plugins}
+        embedPluginConfig={embedPluginConfig}
+      >
+        <ValidatePayloadProvider enabled={validateSchema}>
+          <ListModeProvider defaultListMode={embedPluginConfig?.listMode}>
+            <ValidatePlugins>
+              <ValidatePayload>
+                <EmbedPluginContainer {...props} />
+              </ValidatePayload>
+            </ValidatePlugins>
+          </ListModeProvider>
+        </ValidatePayloadProvider>
+      </XyoEmbedPluginProvider>
+    </ResolvePayloadProvider>
   )
 }

package/src/components/embed-card/EmbedCardHeader.tsx

@@ -0,0 +1,45 @@
+import RefreshIcon from '@mui/icons-material/Refresh'
+import { Avatar, CardHeader, CardHeaderProps, Chip, Theme } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+
+import { useResolvePayload, useXyoEmbedPluginState } from '../../contexts'
+import { EmbedMenu } from './menu'
+
+export const EmbedCardHeader: React.FC<CardHeaderProps> = () => {
+  const { payload, refreshHuri, huri } = useResolvePayload()
+  const { activePlugin, timestampLabel, hideElementsConfig } = useXyoEmbedPluginState()
+  const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {}
+  return (
+    <CardHeader
+      sx={{ flexWrap: 'wrap', rowGap: 1 }}
+      avatar={
+        hideAvatar ? (
+          <></>
+        ) : (
+          <Avatar sx={{ bgcolor: (theme: Theme) => theme.palette.primary.main }} aria-label={activePlugin?.name}>
+            {activePlugin?.name?.charAt(0)}
+          </Avatar>
+        )
+      }
+      action={
+        <FlexRow>
+          {payload?.timestamp ? (
+            hideTimestamp && hideRefreshButton ? (
+              ''
+            ) : (
+              <Chip
+                avatar={hideRefreshButton ? <></> : <RefreshIcon />}
+                clickable={!!huri}
+                onClick={refreshHuri}
+                label={hideTimestamp ? '' : `${timestampLabel} ${new Date(payload.timestamp).toLocaleString()}`}
+              />
+            )
+          ) : null}
+          {/* Huri case is valid as long as the only menu item is JSON */}
+          {hideCardActions || huri === undefined ? null : <EmbedMenu />}
+        </FlexRow>
+      }
+      title={hideTitle ? '' : activePlugin?.name}
+    />
+  )
+}

package/src/components/embed-card/EmbedPluginContainer.tsx

@@ -1,49 +1,24 @@
-import RefreshIcon from '@mui/icons-material/Refresh'
-import { Avatar, Card, CardContent, CardHeader, CardProps, Chip, Theme } from '@mui/material'
-import { FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import { Card, CardContent, CardProps } from '@mui/material'
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { useListMode } from '@xyo-network/react-shared'
 
-import { useXyoEmbedPluginState } from '../../contexts'
+import { useResolvePayload, useXyoEmbedPluginState } from '../../contexts'
 import { EmbedRenderSelect, ListModeSelectFormControl } from '../controls'
-import { RenderComponent } from '../RenderComponent'
-import { EmbedMenu } from './menu'
+import { EmbedCardHeader } from './EmbedCardHeader'
 
-export interface EmbedPluginContainerProps extends CardProps {
-  hideEmbedMenu?: boolean
-}
+export const EmbedPluginContainer: React.FC<CardProps> = (props) => {
+  const { payload } = useResolvePayload()
+  const { activePlugin: ActivePlugin, plugins, hideElementsConfig } = useXyoEmbedPluginState()
+  const { listMode } = useListMode()
 
-export const EmbedPluginContainer: React.FC<EmbedPluginContainerProps> = ({ hideEmbedMenu, ...props }) => {
-  const { activePlugin, payload, timestampLabel, refreshHuri, plugins } = useXyoEmbedPluginState()
   return (
     <Card elevation={3} variant="elevation" {...props}>
-      <CardHeader
-        sx={{ flexWrap: 'wrap', rowGap: 1 }}
-        avatar={
-          <Avatar sx={{ bgcolor: (theme: Theme) => theme.palette.primary.main }} aria-label={activePlugin?.name}>
-            {activePlugin?.name?.charAt(0)}
-          </Avatar>
-        }
-        action={
-          <FlexRow>
-            {payload?.timestamp ? (
-              <Chip
-                avatar={<RefreshIcon />}
-                clickable
-                onClick={refreshHuri}
-                label={`${timestampLabel} ${new Date(payload.timestamp).toLocaleString()}`}
-              />
-            ) : null}
-            {hideEmbedMenu ? null : <EmbedMenu />}
-          </FlexRow>
-        }
-        title={activePlugin?.name}
-      />
+      {hideElementsConfig?.hideCardHeader ? null : <EmbedCardHeader />}
       <FlexGrowRow columnGap={2} rowGap={2} flexWrap="wrap" justifyContent="center" pb={1}>
         {plugins && plugins.length > 1 ? <EmbedRenderSelect /> : null}
-        {(activePlugin?.components?.box?.listModes?.length ?? 0) > 1 ? <ListModeSelectFormControl /> : null}
+        {(ActivePlugin?.components?.box?.listModes?.length ?? 0) > 1 ? <ListModeSelectFormControl /> : null}
       </FlexGrowRow>
-      <CardContent>
-        <RenderComponent payload={payload} ActivePlugin={activePlugin} />
-      </CardContent>
+      <CardContent>{ActivePlugin ? <ActivePlugin.components.box.details payload={payload} listMode={listMode} /> : null}</CardContent>
     </Card>
   )
 }

package/src/components/embed-card/ValidatePlugins.tsx

@@ -1,10 +1,11 @@
 import { Alert, AlertTitle } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
 
-import { useXyoEmbedPluginState } from '../../contexts'
+import { useResolvePayload, useXyoEmbedPluginState } from '../../contexts'
 
 export const ValidatePlugins: React.FC<WithChildren> = ({ children }) => {
-  const { payload, plugins } = useXyoEmbedPluginState()
+  const { payload } = useResolvePayload()
+  const { plugins } = useXyoEmbedPluginState()
 
   if (payload && plugins?.length === 0) {
     return (

package/src/components/embed-card/menu/JsonMenuItem.tsx

@@ -1,10 +1,10 @@
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import { ListItemIcon, ListItemText, MenuItem, MenuItemProps } from '@mui/material'
 
-import { useXyoEmbedPluginState } from '../../../contexts'
+import { useResolvePayload } from '../../../contexts'
 
 export const JsonMenuItem: React.FC<MenuItemProps> = (props) => {
-  const { huri } = useXyoEmbedPluginState()
+  const { huri } = useResolvePayload()
 
   return (
     <>

package/src/components/payload.stories.ts

@@ -0,0 +1,21 @@
+export const payloadData = {
+  assets: {
+    ada: { value: { btc: '0.00002192', eth: '0.00031141', eur: '0.491867', usd: '0.502045' } },
+    btc: { value: { btc: '1', eth: '14.213346', eur: '22450', usd: '22914' } },
+    busd: { value: { btc: '0.00004369', eth: '0.00062074', eur: '0.980451', usd: '1.001' } },
+    dai: { value: { usdc: '1.00004', xyo: '114.394' } },
+    doge: { value: { btc: '0.00000293', eth: '0.00004157', eur: '0.065655', usd: '0.067013' } },
+    dot: { value: { btc: '0.00035508', eth: '0.00504454', eur: '7.97', usd: '8.13' } },
+    eth: { value: { btc: '0.0703878', eth: '1', eur: '1579.47', usd: '1612.16' } },
+    frax: { value: { usdc: '0.999738' } },
+    link: { value: { xyo: '837.731' } },
+    sol: { value: { btc: '0.00169369', eth: '0.02406215', eur: '38.01', usd: '38.79' } },
+    usdc: { value: { btc: '0.0000436965', dai: '0.999963', eth: '0.0006204464999999999', eur: '0.979419', frax: '1.00026', usd: '0.999732' } },
+    usdt: { value: { btc: '0.00004367', eth: '0.0006204', eur: '0.979881', usd: '1.001', usdc: '1.00022', xyo: '113.28' } },
+    wbtc: { value: { btc: '0.99903669', eth: '14.2015745', eur: '22418', usd: '22882', usdc: '22860.8', xyo: '2617950' } },
+    weth: { value: { btc: '0.0703735', usdc: '1610.82', xyo: '186652' } },
+    xyo: { value: { btc: '3.79226e-7', dai: '0.00874169', eth: '0.000005353785', eur: '0.00844792', link: '0.0011937', usd: '0.00872519' } },
+  },
+  schema: 'network.xyo.crypto.asset',
+  timestamp: 1659625815232,
+}

package/src/contexts/ResolvePayloadContext/Context.ts

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

package/src/contexts/ResolvePayloadContext/Provider.tsx

@@ -0,0 +1,71 @@
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { useAsyncEffect, WithChildren } from '@xylabs/react-shared'
+import { delay } from '@xylabs/sdk-js'
+import { XyoApiError } from '@xyo-network/api'
+import { Huri, XyoPayload } from '@xyo-network/payload'
+import { XyoApiErrorRender } from '@xyo-network/react-auth-service'
+import { ResultLoader } from '@xyo-network/react-webapp'
+import { useEffect, useState } from 'react'
+
+import { ResolvePayloadContext } from './Context'
+import { ResolvePayloadState } from './State'
+
+export type ResolvePayloadProviderProps = Omit<ResolvePayloadState, 'provided' & FlexBoxProps>
+
+export const ResolvePayloadProvider: React.FC<WithChildren<ResolvePayloadProviderProps>> = ({ children, huriPayload, ...props }) => {
+  const [payload, setPayload] = useState<XyoPayload>()
+  const [huri, setHuri] = useState<string>()
+
+  useEffect(() => {
+    typeof huriPayload === 'string' ? setHuri(huriPayload) : undefined
+    if (typeof huriPayload === 'object') {
+      setPayload(huriPayload)
+      setRefreshPayload(1)
+    }
+  }, [huriPayload])
+
+  const [notFound, setNotFound] = useState<boolean>()
+  const [huriApiError, setHuriApiError] = useState<XyoApiError>()
+  const [refreshPayload, setRefreshPayload] = useState(0)
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (huri && !refreshPayload) {
+        try {
+          const huriInstance = new Huri(huri)
+          const result = await huriInstance.fetch()
+          // ensure the busy state can stay for a moment to avoid flashing too quickly
+          await delay(500)
+
+          if (mounted()) {
+            setNotFound(result === null)
+            setPayload(result)
+            setRefreshPayload(1)
+          }
+        } catch (e) {
+          setHuriApiError(e as XyoApiError)
+        }
+      }
+    },
+    [huri, payload, refreshPayload],
+  )
+
+  const refreshHuri = () => {
+    if (huri) {
+      setRefreshPayload(0)
+    }
+  }
+
+  return (
+    <ResolvePayloadContext.Provider value={{ huri, huriApiError, notFound, payload, provided: true, refreshHuri, refreshPayload, setPayload }}>
+      <ResultLoader searchResult={payload} notFound={!!notFound} apiError={huriApiError}>
+        <XyoApiErrorRender apiError={huriApiError}>
+          <FlexCol busy={Boolean(!refreshPayload && payload)} {...props}>
+            {children}
+          </FlexCol>
+        </XyoApiErrorRender>
+      </ResultLoader>
+    </ResolvePayloadContext.Provider>
+  )
+}

package/src/contexts/ResolvePayloadContext/State.ts

@@ -0,0 +1,15 @@
+import { XyoApiError } from '@xyo-network/api'
+import { XyoPayload } from '@xyo-network/payload'
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch, SetStateAction } from 'react'
+
+export interface ResolvePayloadState extends ContextExState {
+  huri?: string
+  huriApiError?: XyoApiError
+  huriPayload?: string | XyoPayload
+  notFound?: boolean
+  payload?: XyoPayload
+  refreshHuri?: () => void
+  refreshPayload?: number
+  setPayload?: Dispatch<SetStateAction<XyoPayload | undefined>>
+}

package/src/contexts/ResolvePayloadContext/index.ts

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

package/src/contexts/ResolvePayloadContext/use.tsx

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { ResolvePayloadContext } from './Context'
+
+export const useResolvePayload = () => useContextEx(ResolvePayloadContext, 'ResolvePayload', true)

package/src/contexts/ValidatePayloadContext/Provider.stories.tsx

@@ -1,6 +1,7 @@
 import { Typography } from '@mui/material'
 import { ComponentStory, DecoratorFn, Meta } from '@storybook/react'
 
+import { ResolvePayloadProvider, ResolvePayloadState } from '../ResolvePayloadContext'
 import { XyoEmbedPluginContext, XyoEmbedPluginState } from '../XyoEmbedPluginContext'
 import { ValidatePayloadProvider, ValidatePayloadProviderProps } from './Provider'
 import { useValidatePayload } from './use'
@@ -8,9 +9,11 @@ import { useValidatePayload } from './use'
 const EmbedDecorator: DecoratorFn = (Story, { args }) => {
   const { xyoEmbedPluginContext, ...props } = args
   return (
-    <XyoEmbedPluginContext.Provider value={xyoEmbedPluginContext}>
-      <Story {...props} />
-    </XyoEmbedPluginContext.Provider>
+    <ResolvePayloadProvider>
+      <XyoEmbedPluginContext.Provider value={xyoEmbedPluginContext}>
+        <Story {...props} />
+      </XyoEmbedPluginContext.Provider>
+    </ResolvePayloadProvider>
   )
 }
 
@@ -27,6 +30,7 @@ const ValidatePayloadState = () => {
 
 interface ValidatePayloadProviderPropsEx extends ValidatePayloadProviderProps {
   xyoEmbedPluginContext: XyoEmbedPluginState
+  resolvePayloadContext: ResolvePayloadState
 }
 
 const Template: ComponentStory<React.FC<ValidatePayloadProviderPropsEx>> = (props) => {
@@ -41,16 +45,24 @@ const Template: ComponentStory<React.FC<ValidatePayloadProviderPropsEx>> = (prop
 
 const InvalidPayload = { schema: 'network.xyo.schema' }
 const ValidPayload = { definition: { $id: 'test.schema' }, schema: 'network.xyo.schema' }
-const XyoEmbedPluginProviderDefaultValue = { provided: true }
+const stubProviderDefaultValue = { provided: true }
 
 const Default = Template.bind({})
-Default.args = { xyoEmbedPluginContext: XyoEmbedPluginProviderDefaultValue }
+Default.args = { xyoEmbedPluginContext: stubProviderDefaultValue }
 
 const ValidationSucceeded = Template.bind({})
-ValidationSucceeded.args = { enabled: true, xyoEmbedPluginContext: { payload: ValidPayload, ...XyoEmbedPluginProviderDefaultValue } }
+ValidationSucceeded.args = {
+  enabled: true,
+  resolvePayloadContext: { payload: ValidPayload, ...stubProviderDefaultValue },
+  xyoEmbedPluginContext: stubProviderDefaultValue,
+}
 
 const ValidationFailed = Template.bind({})
-ValidationFailed.args = { enabled: true, xyoEmbedPluginContext: { payload: InvalidPayload, ...XyoEmbedPluginProviderDefaultValue } }
+ValidationFailed.args = {
+  enabled: true,
+  resolvePayloadContext: { payload: InvalidPayload, ...stubProviderDefaultValue },
+  xyoEmbedPluginContext: stubProviderDefaultValue,
+}
 
 export { Default, ValidationFailed, ValidationSucceeded }
 

package/src/contexts/ValidatePayloadContext/Provider.tsx

@@ -3,7 +3,7 @@ import { useAsyncEffect, WithChildren } from '@xylabs/react-shared'
 import { XyoSchemaCache, XyoSchemaNameToValidatorMap } from '@xyo-network/utils'
 import { useState } from 'react'
 
-import { useXyoEmbedPluginState } from '../XyoEmbedPluginContext'
+import { useResolvePayload } from '../ResolvePayloadContext'
 import { ValidatePayloadContext } from './Context'
 
 export interface ValidatePayloadProviderProps {
@@ -12,7 +12,7 @@ export interface ValidatePayloadProviderProps {
 }
 
 export const ValidatePayloadProvider: React.FC<WithChildren<ValidatePayloadProviderProps>> = ({ children, enabled = false }) => {
-  const { payload } = useXyoEmbedPluginState()
+  const { payload } = useResolvePayload()
   const [initialized, setInitialized] = useState(false)
   const [valid, setValid] = useState<boolean>()