@xyo-network/react-chain-provider 1.20.2 → 1.20.4

package/src/contexts/gateway/Provider.tsx

@@ -1,25 +1,24 @@
-/* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */
 /* eslint-disable react-hooks/set-state-in-effect */
+/* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */
 import { isDefinedNotNull, isNull } from '@xylabs/sdk-js'
-import type { AccountInstance } from '@xyo-network/sdk-js'
+import { ErrorRender } from '@xyo-network/react-error'
 import type { GatewayName } from '@xyo-network/xl1-sdk'
 import type { PropsWithChildren } from 'react'
 import React, {
   useEffect, useMemo, useState,
 } from 'react'
 
-import { useGatewayFromConfig, useGatewayFromWallet } from '../../hooks/index.ts'
+import { useGatewayFromWallet } from '../../hooks/index.ts'
+import type { ContextGatewayType } from '../../types/index.ts'
+import { useProvidedInPageGateways } from '../in-page-gateways/index.ts'
 import { GatewayContext } from './context.ts'
-import type { ContextGatewayType, GatewayState } from './state.ts'
+import type { GatewayState } from './state.ts'
 
 export interface GatewayProviderProps extends PropsWithChildren {
-  account?: AccountInstance
   gatewayName?: GatewayName
 }
 
-export const GatewayProvider: React.FC<GatewayProviderProps> = ({
-  account, gatewayName, children,
-}) => {
+export const GatewayProvider: React.FC<GatewayProviderProps> = ({ gatewayName, children }) => {
   const [defaultGateway, setDefaultGateway] = useState<ContextGatewayType | null | undefined>()
   const [gateways, setGateways] = useState<GatewayState['gateways']>({
     inPageGateway: undefined,
@@ -32,10 +31,13 @@ export const GatewayProvider: React.FC<GatewayProviderProps> = ({
   } = useGatewayFromWallet(gatewayName)
 
   const {
-    gateway: gatewayFromConfig,
-    error: gatewayFromConfigError,
-    clearGateways: clearGatewaysFromConfig,
-  } = useGatewayFromConfig(gatewayName, account)
+    gateways: allGateways,
+    errors: allGatewayErrors,
+    clearAll,
+  } = useProvidedInPageGateways(true)
+
+  const gatewayFromConfig = gatewayName ? allGateways[gatewayName] : undefined
+  const gatewayFromConfigError = gatewayName ? allGatewayErrors[gatewayName] : undefined
 
   useEffect(() => {
     if (isNull(gatewayFromWallet)) {
@@ -56,18 +58,25 @@ export const GatewayProvider: React.FC<GatewayProviderProps> = ({
 
   const value = useMemo(() => {
     const value: GatewayState = {
-      defaultGateway: defaultGateway,
+      defaultGateway,
       error: gatewayFromWalletError || gatewayFromConfigError,
       gateways,
       provided: true,
-      resetGatewaysFromConfig: clearGatewaysFromConfig,
+      resetGatewaysFromConfig: clearAll,
     }
     return value
-  }, [defaultGateway,
+  }, [
+    defaultGateway,
     gatewayFromWalletError,
     gatewayFromConfigError,
     gateways,
-    clearGatewaysFromConfig])
+    clearAll,
+  ])
 
-  return <GatewayContext value={value}>{children}</GatewayContext>
+  return (
+    <GatewayContext value={value}>
+      <ErrorRender error={gatewayFromConfigError} />
+      {children}
+    </GatewayContext>
+  )
 }

package/src/contexts/gateway/state.ts

@@ -1,8 +1,6 @@
 import type { ContextExState } from '@xylabs/react-shared'
-import type { XyoGateway, XyoGatewayRunner } from '@xyo-network/xl1-sdk'
 
-// Can be removed once there is a gateway type with optional runner properties
-export type ContextGatewayType = XyoGateway | XyoGatewayRunner
+import type { ContextGatewayType } from '../../types/index.ts'
 
 export interface GatewayStateFields {
   defaultGateway: ContextGatewayType | undefined | null

package/src/contexts/gateway/story/GatewayStats.tsx

@@ -2,6 +2,7 @@ import { Stack, Typography } from '@mui/material'
 import type { AccountInstance } from '@xyo-network/sdk-js'
 import type { GatewayName } from '@xyo-network/xl1-sdk'
 
+import { InPageGatewaysProvider } from '../../in-page-gateways/index.ts'
 import { GatewayProvider } from '../Provider.tsx'
 import { GatewayStatus } from './GatewayStatus.tsx'
 
@@ -15,16 +16,18 @@ export const GatewayStats: React.FC<GatewayStatsProps> = ({
   account, id, url,
 }) => {
   return (
-    <GatewayProvider key={id} gatewayName={id} account={account}>
-      <Stack gap={1}>
-        <Typography variant="subtitle1">
-          <strong>{id}</strong>
-        </Typography>
-        <Typography variant="caption" color="text.secondary">
-          {url}
-        </Typography>
-        <GatewayStatus />
-      </Stack>
-    </GatewayProvider>
+    <InPageGatewaysProvider account={account}>
+      <GatewayProvider key={id} gatewayName={id}>
+        <Stack gap={1}>
+          <Typography variant="subtitle1">
+            <strong>{id}</strong>
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            {url}
+          </Typography>
+          <GatewayStatus />
+        </Stack>
+      </GatewayProvider>
+    </InPageGatewaysProvider>
   )
 }

package/src/contexts/gateway/story/Provider.stories.tsx

@@ -10,7 +10,7 @@ import { GatewayStats } from './GatewayStats.tsx'
 const meta: Meta<GatewayProviderProps> = {
   title: 'provider/GatewayProvider',
   component: GatewayProvider,
-  // eslint-disable-next-line @stylistic/max-len
+
   parameters: { docs: { description: { component: 'Wraps children with a `GatewayContext` populated from the given `gatewayName` and show the gateways from the default networks if available.' } } },
 }
 

package/src/contexts/gateway/story/ProviderWithWallet.stories.tsx

@@ -1,6 +1,6 @@
 import { Alert, Stack } from '@mui/material'
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { isDefinedNotNull } from '@xylabs/sdk-js'
+import { isDefinedNotNull, isNull } from '@xylabs/sdk-js'
 import { IframeWalletWarningDecorator } from '@xyo-network/react-chain-shared'
 import type { GatewayName } from '@xyo-network/xl1-sdk'
 
@@ -13,7 +13,7 @@ const meta: Meta<GatewayProviderProps> = {
   title: 'provider/GatewayProvider',
   component: GatewayProvider,
   decorators: [IframeWalletWarningDecorator],
-  // eslint-disable-next-line @stylistic/max-len
+
   parameters: { docs: { description: { component: 'Wraps children with a `GatewayContext` populated from the given `gatewayName` and show the wallet-provided gateways if available.' } } },
 }
 
@@ -30,10 +30,12 @@ const AllClientGateways: Story = {
   render: () => {
     const { client } = useClientFromWallet()
     const foundClient = isDefinedNotNull(client)
+    const notFoundClient = isNull(client)
     return (
       <Stack gap={3} p={2}>
         <Alert severity={foundClient ? 'success' : 'error'}>
-          {foundClient ? 'Client found, displaying gateways:' : 'No client found. Please ensure your wallet is connected and has access to the current page.'}
+          {foundClient ? 'Client found, displaying gateways:' : ''}
+          {notFoundClient ? 'No client found. Please ensure your wallet is connected and has access to the current page.' : ''}
         </Alert>
         {Object.keys(client?.gateways || {}).map(id => (
           <GatewayStats key={id} id={id as GatewayName} />

package/src/contexts/in-page-gateways/Provider.tsx

@@ -0,0 +1,82 @@
+import type { AccountInstance } from '@xyo-network/sdk-js'
+import type { GatewayName } from '@xyo-network/xl1-sdk'
+import { DefaultNetworks } from '@xyo-network/xl1-sdk'
+import type { PropsWithChildren } from 'react'
+import React, {
+  startTransition,
+  useCallback, useEffect, useMemo, useState,
+} from 'react'
+
+import { buildGateway } from '../../lib/index.ts'
+import type { ContextGatewayType } from '../../types/index.ts'
+import { InPageGatewaysContext } from './context.ts'
+import type { InPageGatewaysState } from './state.ts'
+
+export interface InPageGatewaysProviderProps extends PropsWithChildren {
+  account?: AccountInstance
+}
+
+export const InPageGatewaysProvider: React.FC<InPageGatewaysProviderProps> = ({ account, children }) => {
+  const [gateways, setGateways] = useState<Partial<Record<GatewayName, ContextGatewayType>>>({})
+  const [errors, setErrors] = useState<Partial<Record<GatewayName, Error>>>({})
+  const [previousAccount, setPreviousAccount] = useState<AccountInstance | undefined>(account)
+
+  const clearAll = useCallback(() => {
+    setGateways({})
+    setErrors({})
+  }, [])
+
+  if (previousAccount !== account) {
+    clearAll()
+    setPreviousAccount(account)
+  }
+
+  useEffect(() => {
+    let cancelled = false
+
+    const buildAll = async () => {
+      const results = await Promise.allSettled(
+        DefaultNetworks.map(async (network) => {
+          const gateway = await buildGateway(network.id as GatewayName, account)
+          return { id: network.id as GatewayName, gateway }
+        }),
+      )
+
+      if (cancelled) return
+
+      const nextGateways: Partial<Record<GatewayName, ContextGatewayType>> = {}
+      const nextErrors: Partial<Record<GatewayName, Error>> = {}
+
+      for (const [index, result] of results.entries()) {
+        const networkId = DefaultNetworks[index].id as GatewayName
+        if (result.status === 'fulfilled') {
+          nextGateways[networkId] = result.value.gateway
+        } else {
+          nextErrors[networkId] = result.reason instanceof Error ? result.reason : new Error(String(result.reason))
+        }
+      }
+
+      startTransition(() => {
+        setGateways(nextGateways)
+        setErrors(nextErrors)
+      })
+    }
+
+    void buildAll()
+    return () => {
+      cancelled = true
+    }
+  }, [account])
+
+  const value = useMemo(() => {
+    const value: InPageGatewaysState = {
+      clearAll,
+      errors,
+      gateways,
+      provided: true,
+    }
+    return value
+  }, [clearAll, errors, gateways])
+
+  return <InPageGatewaysContext value={value}>{children}</InPageGatewaysContext>
+}

package/src/contexts/in-page-gateways/context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xylabs/react-shared'
+
+import type { InPageGatewaysState } from './state.ts'
+
+export const InPageGatewaysContext = createContextEx<InPageGatewaysState>()

package/src/contexts/in-page-gateways/index.ts

@@ -0,0 +1,4 @@
+export * from './context.ts'
+export * from './Provider.tsx'
+export * from './state.ts'
+export * from './use.ts'

package/src/contexts/in-page-gateways/state.ts

@@ -0,0 +1,12 @@
+import type { ContextExState } from '@xylabs/react-shared'
+import type { GatewayName } from '@xyo-network/xl1-sdk'
+
+import type { ContextGatewayType } from '../../types/index.ts'
+
+export interface InPageGatewaysStateFields {
+  clearAll: () => void
+  errors: Partial<Record<GatewayName, Error>>
+  gateways: Partial<Record<GatewayName, ContextGatewayType>>
+}
+
+export type InPageGatewaysState = ContextExState<InPageGatewaysStateFields>

package/src/contexts/in-page-gateways/use.ts

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xylabs/react-shared'
+
+import { InPageGatewaysContext } from './context.ts'
+
+export const useProvidedInPageGateways = (required = true) => useContextEx(InPageGatewaysContext, 'InPageGateways', required)

package/src/contexts/index.ts

@@ -1,2 +1,3 @@
 export * from './current-block/index.ts'
 export * from './gateway/index.ts'
+export * from './in-page-gateways/index.ts'

package/src/hooks/client/helpers/index.ts

@@ -1,2 +1 @@
-export * from './buildGateway.ts'
 export * from './findCaveat.ts'

package/src/hooks/client/index.ts

@@ -1,4 +1,3 @@
 export * from './permissions/index.ts'
 export * from './useClientFromWallet.ts'
-export * from './useGatewayFromConfig.ts'
 export * from './useGatewayFromWallet.ts'

package/src/hooks/client/useClientFromWallet.ts

@@ -7,7 +7,7 @@ import {
 import { getXyoClient } from '../helpers/index.ts'
 
 interface ClientState {
-  client?: XyoClient
+  client?: XyoClient | null
   error: Error | null
   isLoading: boolean
   timedout: boolean
@@ -39,7 +39,9 @@ const initializeClient = async (timeout?: number) => {
   try {
     const client = await getXyoClient(timeout)
     if (client === null) {
-      updateState({ timedout: true, isLoading: false })
+      updateState({
+        client: null, timedout: true, isLoading: false,
+      })
       return
     }
     updateState({

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './components/index.ts'
 export * from './contexts/index.ts'
 export * from './hooks/index.ts'
 export * from './lib/index.ts'
+export * from './types/index.ts'

package/src/lib/index.ts

@@ -1,2 +1,3 @@
 export * from './balanceForRange.ts'
+export * from './buildGateway.ts'
 export * from './findMinimumBlock.ts'

package/src/types/ContextGatewayType.ts

@@ -0,0 +1,4 @@
+import type { XyoGateway, XyoGatewayRunner } from '@xyo-network/xl1-sdk'
+
+// Can be removed once there is a gateway type with optional runner properties
+export type ContextGatewayType = XyoGateway | XyoGatewayRunner

package/src/types/index.ts

@@ -1 +1,2 @@
+export * from './ContextGatewayType.ts'
 export * from './GatewayFromWallet.ts'

package/dist/browser/hooks/client/helpers/buildGateway.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"buildGateway.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/client/helpers/buildGateway.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,KAAK,EACV,WAAW,EAAgB,gBAAgB,EAC5C,MAAM,sBAAsB,CAAA;AAK7B,eAAO,MAAM,YAAY,GAAU,aAAa,WAAW,EAAE,UAAU,eAAe,wFAkBrF,CAAA"}

package/dist/browser/hooks/client/useGatewayFromConfig.d.ts

@@ -1,9 +0,0 @@
-import type { AccountInstance } from '@xyo-network/sdk-js';
-import type { GatewayName } from '@xyo-network/xl1-sdk';
-export declare const useGatewayFromConfig: (gatewayName?: GatewayName, account?: AccountInstance) => {
-    gateway: import("@xyo-network/xl1-sdk").XyoGatewayRunner | import("@xyo-network/xl1-sdk").CreatableProviderInstance<import("@xyo-network/xl1-sdk").SimpleXyoGateway> | import("@xyo-network/xl1-sdk").XyoGateway | undefined;
-    error: Error | undefined;
-    state: import("@xylabs/react-promise").UsePromiseState | undefined;
-    clearGateways: () => void;
-};
-//# sourceMappingURL=useGatewayFromConfig.d.ts.map

package/dist/browser/hooks/client/useGatewayFromConfig.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGatewayFromConfig.d.ts","sourceRoot":"","sources":["../../../../src/hooks/client/useGatewayFromConfig.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAMvD,eAAO,MAAM,oBAAoB,GAAI,cAAc,WAAW,EAAE,UAAU,eAAe;;;;;CAiCxF,CAAA"}

package/src/hooks/client/useGatewayFromConfig.ts

@@ -1,43 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import { isDefined } from '@xylabs/sdk-js'
-import type { AccountInstance } from '@xyo-network/sdk-js'
-import type { GatewayName } from '@xyo-network/xl1-sdk'
-import { useState } from 'react'
-
-import type { ContextGatewayType } from '../../contexts/index.ts'
-import { buildGateway } from './helpers/index.ts'
-
-export const useGatewayFromConfig = (gatewayName?: GatewayName, account?: AccountInstance) => {
-  const [gatewayCache, setGatewayCache] = useState<Record<GatewayName, ContextGatewayType>>({})
-  const clearGateways = () => setGatewayCache({})
-
-  // if the account changes, we should clear the gateway cache since the gateway is built with the account
-  const [previousAccount, setPreviousAccount] = useState<AccountInstance | undefined>(account)
-  if (previousAccount !== account) {
-    clearGateways()
-    setPreviousAccount(account)
-  }
-
-  const builtGatewayResults = usePromise(async () => {
-    if (isDefined(gatewayName)) {
-      // if gateway already built and cached, return it
-      if (isDefined(gatewayCache[gatewayName])) {
-        return gatewayCache[gatewayName]
-      } else {
-        // otherwise build the gateway and cache it
-        const gateway = await buildGateway(gatewayName, account)
-        setGatewayCache(prev => ({ ...prev, [gatewayName]: gateway }))
-        return gateway
-      }
-    }
-  }, [gatewayName, account, gatewayCache])
-
-  const [gateway, error, state] = builtGatewayResults
-
-  return {
-    gateway,
-    error,
-    state,
-    clearGateways,
-  }
-}