separate out useClient and useGateway

Author: jonesmac

src/Sample.tsx

@@ -5,18 +5,19 @@ import { assertEx } from '@xylabs/assert'
 import type { Hash } from '@xylabs/hex'
 import { isHash } from '@xylabs/hex'
 import { isUndefined } from '@xylabs/typeof'
+import type { GatewayName } from '@xyo-network/xl1-protocol'
 import { useState } from 'react'
 
 import {
   Onboarding, SubmitTransactionButton, TxConfirmedAlert, WelcomeStack,
 } from './components/index.ts'
-import { buildSamplePayloads } from './helpers/index.ts'
-import { useDefaultGateway } from './hooks/index.ts'
+import { buildSamplePayloads, LocalGatewayName } from './helpers/index.ts'
+import { useGateway } from './hooks/index.ts'
 
 export const XL1BrowserSample = () => {
   const [error, setError] = useState<Error>()
   const [confirmed, setConfirmed] = useState<Hash>()
-  const { gateway, error: gatewayError } = useDefaultGateway()
+  const { gateway, error: gatewayError } = useGateway(LocalGatewayName)
 
   const submitTransaction = async () => {
     setError(undefined)

src/components/buttons/SubmitTransactionButton.tsx

@@ -2,10 +2,11 @@ import type { ButtonProps } from '@mui/material'
 import { Button } from '@mui/material'
 import { isUndefined } from '@xylabs/typeof'
 
-import { useDefaultGateway, useOnBoarding } from '../../hooks/index.ts'
+import { LocalGatewayName } from '../../helpers/index.ts'
+import { useGateway, useOnBoarding } from '../../hooks/index.ts'
 
 export const SubmitTransactionButton: React.FC<ButtonProps> = (props) => {
-  const { gateway } = useDefaultGateway()
+  const { gateway } = useGateway(LocalGatewayName)
   const { showSubmitTransaction } = useOnBoarding()
 
   return showSubmitTransaction

src/helpers/LocalGatewayName.ts

@@ -0,0 +1,3 @@
+import type { GatewayName } from '@xyo-network/xl1-protocol'
+
+export const LocalGatewayName = 'local' as GatewayName

src/helpers/getXyoClient.ts

@@ -0,0 +1,37 @@
+import type { XyoClient } from '@xyo-network/xl1-protocol'
+
+const CLIENT_LISTENER_TIMEOUT = 5000
+
+const hasXyoClient = () => {
+  return 'client' in globalThis.xyo
+}
+
+export const listenForClientInjection = (onClientReady: () => void, onTimeout: () => void) => {
+  let resolved = false
+  const listener: EventListener = () => {
+    onClientReady()
+    resolved = true
+  }
+  globalThis.addEventListener('xyo:plugin-ready', listener)
+  setTimeout(() => {
+    if (!resolved) {
+      onTimeout()
+    }
+  }, CLIENT_LISTENER_TIMEOUT)
+}
+
+export async function getXyoClient(): Promise<XyoClient | undefined> {
+  return hasXyoClient()
+    ? globalThis.xyo.client
+    // listen for the XyoWallet to be injected
+    : await new Promise<XyoClient | undefined>((resolve, reject) => {
+        listenForClientInjection(
+          () => {
+            resolve(globalThis.xyo.client)
+          },
+          () => {
+            reject(new Error('XYO Client not installed'))
+          },
+        )
+      })
+}

src/helpers/getXyoGateway.ts

@@ -1,2 +1,3 @@
 export * from './buildSamplePayloads.ts'
-export * from './getXyoGateway.ts'
+export * from './getXyoClient.ts'
+export * from './LocalGatewayName.ts'

src/helpers/index.ts

@@ -1,2 +1,2 @@
-export * from './useDefaultGateway.ts'
+export * from './useGateway.ts'
 export * from './useOnBoarding.ts'

src/hooks/index.ts

@@ -1,16 +1,16 @@
-import type { XyoGatewayProvider } from '@xyo-network/xl1-protocol'
+import type { XyoClient } from '@xyo-network/xl1-protocol'
 import { useSyncExternalStore } from 'react'
 
-import { getXyoGateway } from '../helpers/index.ts'
+import { getXyoClient } from '../helpers/index.ts'
 
-interface GatewayState {
+interface ClientState {
+  client?: XyoClient
   error: Error | null
-  gateway?: XyoGatewayProvider
   isLoading: boolean
 }
 
-let currentState: GatewayState = {
-  gateway: undefined,
+let currentState: ClientState = {
+  client: undefined,
   error: null,
   isLoading: false,
 }
@@ -21,20 +21,20 @@ const emitChange = () => {
   for (const listener of listeners) listener()
 }
 
-const updateState = (newState: Partial<GatewayState>) => {
+const updateState = (newState: Partial<ClientState>) => {
   currentState = { ...currentState, ...newState }
   emitChange()
 }
 
-const initializeGateway = async () => {
-  if (currentState.isLoading || currentState.gateway) return
+const initializeClient = async () => {
+  if (currentState.isLoading || currentState.client) return
 
   updateState({ isLoading: true, error: null })
 
   try {
-    const gateway = await getXyoGateway()
+    const client = await getXyoClient()
     updateState({
-      gateway, isLoading: false, error: null,
+      client, isLoading: false, error: null,
     })
   } catch (error) {
     updateState({ error: error as Error, isLoading: false })
@@ -44,15 +44,15 @@ const initializeGateway = async () => {
 const subscribe = (listener: () => void) => {
   listeners.add(listener)
 
-  void initializeGateway()
+  void initializeClient()
 
   return () => {
     listeners.delete(listener)
   }
 }
 
-const getSnapshot = (): GatewayState => currentState
+const getSnapshot = (): ClientState => currentState
 
-export const useDefaultGateway = () => {
+export const useClient = () => {
   return useSyncExternalStore(subscribe, getSnapshot)
 }

src/hooks/useDefaultGateway.ts src/hooks/useClient.tssrc/hooks/useDefaultGateway.ts renamed to src/hooks/useClient.ts

@@ -0,0 +1,14 @@
+import type { GatewayName } from '@xyo-network/xl1-protocol'
+
+import { useClient } from './useClient.ts'
+
+export const useGateway = (gatewayName?: GatewayName) => {
+  const {
+    client, isLoading, error,
+  } = useClient()
+  return {
+    gateway: gatewayName ? client?.gateways?.[gatewayName] : undefined,
+    isLoading,
+    error,
+  }
+}

src/hooks/useGateway.ts

@@ -1,10 +1,11 @@
 import { isDefined, isUndefined } from '@xylabs/typeof'
 import { useCheckLocalRpc } from '@xyo-network/react-chain-provider'
 
-import { useDefaultGateway } from './useDefaultGateway.ts'
+import { LocalGatewayName } from '../helpers/index.ts'
+import { useGateway } from './useGateway.ts'
 
 export const useOnBoarding = () => {
-  const { gateway } = useDefaultGateway()
+  const { gateway } = useGateway(LocalGatewayName)
   const { isLocalProducer } = useCheckLocalRpc()
 
   const producerIsReachable = isLocalProducer