@xyo-network/react-embed 2.27.30 → 2.27.31

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

@@ -2,11 +2,12 @@ import RefreshIcon from '@mui/icons-material/Refresh'
 import { Avatar, CardHeader, CardHeaderProps, Chip, Theme } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
 
-import { useXyoEmbedPluginState } from '../../contexts'
+import { useResolvePayload, useXyoEmbedPluginState } from '../../contexts'
 import { EmbedMenu } from './menu'
 
 export const EmbedCardHeader: React.FC<CardHeaderProps> = () => {
-  const { activePlugin, payload, timestampLabel, refreshHuri, hideElementsConfig } = useXyoEmbedPluginState()
+  const { payload, refreshHuri, huri } = useResolvePayload()
+  const { activePlugin, timestampLabel, hideElementsConfig } = useXyoEmbedPluginState()
   const { hideAvatar, hideTitle, hideRefreshButton, hideTimestamp, hideCardActions } = hideElementsConfig ?? {}
   return (
     <CardHeader
@@ -28,13 +29,14 @@ export const EmbedCardHeader: React.FC<CardHeaderProps> = () => {
             ) : (
               <Chip
                 avatar={hideRefreshButton ? <></> : <RefreshIcon />}
-                clickable
+                clickable={!!huri}
                 onClick={refreshHuri}
                 label={hideTimestamp ? '' : `${timestampLabel} ${new Date(payload.timestamp).toLocaleString()}`}
               />
             )
           ) : null}
-          {hideCardActions ? null : <EmbedMenu />}
+          {/* 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

@@ -2,12 +2,13 @@ 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 { EmbedCardHeader } from './EmbedCardHeader'
 
 export const EmbedPluginContainer: React.FC<CardProps> = (props) => {
-  const { activePlugin: ActivePlugin, payload, plugins, hideElementsConfig } = useXyoEmbedPluginState()
+  const { payload } = useResolvePayload()
+  const { activePlugin: ActivePlugin, plugins, hideElementsConfig } = useXyoEmbedPluginState()
   const { listMode } = useListMode()
 
   return (

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>()
 

package/src/contexts/XyoEmbedPluginContext/Provider.tsx

@@ -1,60 +1,26 @@
-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 { WithChildren } from '@xylabs/react-shared'
+import { XyoPayload } from '@xyo-network/payload'
 import { XyoPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-import { ResultLoader } from '@xyo-network/react-webapp'
 import { useState } from 'react'
 
 import { XyoEmbedPluginContext } from './Context'
 import { XyoEmbedPluginBase } from './State'
 
-export interface XyoEmbedPluginProviderProps extends XyoEmbedPluginBase, FlexBoxProps {}
+export interface XyoEmbedPluginProviderProps extends XyoEmbedPluginBase {
+  /** string for huri to resolve and payload for bypassing huri resolution */
+  huriPayload?: string | XyoPayload
+}
 
+/** Expose passed embed plugin props and payload via context */
 export const XyoEmbedPluginProvider: React.FC<WithChildren<XyoEmbedPluginProviderProps>> = ({
   children,
   refreshTitle,
   timestampLabel,
   hideElementsConfig,
-  huri,
   plugins,
   embedPluginConfig,
-  ...props
 }) => {
-  const [payload, setPayload] = useState<XyoPayload>()
-  const [notFound, setNotFound] = useState<boolean>()
-  const [huriApiError, setHuriApiError] = useState<XyoApiError>()
   const [activePlugin, setActivePlugin] = useState<XyoPayloadRenderPlugin | undefined>(plugins ? plugins[0] : undefined)
-  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 = () => {
-    setRefreshPayload(0)
-  }
 
   return (
     <XyoEmbedPluginContext.Provider
@@ -62,22 +28,13 @@ export const XyoEmbedPluginProvider: React.FC<WithChildren<XyoEmbedPluginProvide
         activePlugin,
         embedPluginConfig,
         hideElementsConfig,
-        huri,
-        payload,
         provided: true,
-        refreshHuri,
         refreshTitle,
         setActivePlugin,
         timestampLabel,
       }}
     >
-      <ResultLoader searchResult={payload} notFound={!!notFound} apiError={huriApiError}>
-        <XyoApiErrorRender apiError={huriApiError}>
-          <FlexCol busy={Boolean(!refreshPayload && payload)} {...props}>
-            {children}
-          </FlexCol>
-        </XyoApiErrorRender>
-      </ResultLoader>
+      {children}
     </XyoEmbedPluginContext.Provider>
   )
 }

package/src/contexts/XyoEmbedPluginContext/State.ts

@@ -1,4 +1,3 @@
-import { XyoPayload } from '@xyo-network/payload'
 import { XyoPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
 import { ContextExState, ListMode } from '@xyo-network/react-shared'
 import { Dispatch, SetStateAction } from 'react'
@@ -23,6 +22,7 @@ export interface XyoEmbedPluginBase {
   plugins?: XyoPayloadRenderPlugin[]
   /** XyoEmbedPlugin component configuration */
   embedPluginConfig?: XyoPluginConfig
+  /** @deprecated use huriPayload */
   huri?: string
   refreshTitle?: string
   timestampLabel?: string
@@ -32,6 +32,4 @@ export interface XyoEmbedPluginBase {
 export interface XyoEmbedPluginState extends XyoEmbedPluginBase, ContextExState {
   activePlugin?: XyoPayloadRenderPlugin
   setActivePlugin?: Dispatch<SetStateAction<XyoPayloadRenderPlugin | undefined>>
-  payload?: XyoPayload
-  refreshHuri?: () => void
 }

package/src/contexts/index.ts

@@ -1,2 +1,3 @@
+export * from './ResolvePayloadContext'
 export * from './ValidatePayloadContext'
 export * from './XyoEmbedPluginContext'

package/src/types/XyoEmbedPluginProps.ts

@@ -1,8 +1,11 @@
 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
 }