use events to know if gateway is ready

Author: jonesmac

package.json

@@ -33,6 +33,7 @@
     "@xylabs/assert": "~5.0.10",
     "@xylabs/delay": "~5.0.10",
     "@xylabs/hex": "~5.0.10",
+    "@xylabs/react-promise": "~7.0.4",
     "@xylabs/typeof": "~5.0.10",
     "@xyo-network/id-payload-plugin": "~5.0.7",
     "@xyo-network/payload-builder": "~5.0.7",

src/getXyoGateway.ts

@@ -2,21 +2,42 @@ import type { GatewayName, XyoGatewayProvider } from '@xyo-network/xl1-protocol'
 
 const localGatewayName = 'local' as GatewayName
 
+const GATEWAY_LISTENER_TIMEOUT = 5000
+
 export const hasXyoWalletGateway = () => {
   return 'client' in globalThis.xyo
 }
 
-export function getXyoGateway(options: { assert: true }): XyoGatewayProvider
-export function getXyoGateway(options?: { assert?: boolean }): XyoGatewayProvider | undefined {
+export const listenForWalletInjection = (onPluginReady: () => void, onTimeout: () => void) => {
+  let resolved = false
+  const listener: EventListener = (e) => {
+    onPluginReady()
+    resolved = true
+  }
+  globalThis.addEventListener('xyo:plugin-ready', listener)
+  setTimeout(() => {
+    if (!resolved) {
+      onTimeout()
+    }
+  }, GATEWAY_LISTENER_TIMEOUT)
+}
+
+export async function getXyoGateway(options: { assert: true }): Promise<XyoGatewayProvider>
+export async function getXyoGateway(options?: { assert?: boolean }): Promise<XyoGatewayProvider | undefined> {
   const { assert } = options ?? {}
   if (hasXyoWalletGateway()) {
     return globalThis.xyo.client?.gateways?.[localGatewayName]
   } else {
-    console.error('XYO Wallet not installed')
-    if (assert) {
-      throw new Error('XYO Wallet not installed')
-    } else {
-      return undefined
-    }
+    // listen for the XyoWallet to be injected
+    return await new Promise<XyoGatewayProvider | undefined>((resolve, reject) => {
+      listenForWalletInjection(
+        () => {
+          resolve(globalThis.xyo.client?.gateways?.[localGatewayName])
+        },
+        () => {
+          reject(new Error('XYO Wallet not installed'))
+        }
+      )
+    })
   }
 }

src/hooks/useDefaultGateway.ts

@@ -2,14 +2,15 @@ import type { XyoGatewayProvider } from '@xyo-network/xl1-protocol'
 import { useEffect, useState } from 'react'
 
 import { getXyoGateway } from '../getXyoGateway.ts'
+import { usePromise } from '@xylabs/react-promise'
 
 export const useDefaultGateway = () => {
   const [gateway, setGateway] = useState<XyoGatewayProvider>()
   const [error, setError] = useState<Error | null>(null)
 
-  useEffect(() => {
+  usePromise(async () => {
     try {
-      const xyoGateway = getXyoGateway({ assert: true })
+      const xyoGateway = await getXyoGateway({ assert: true })
       setGateway(xyoGateway)
     } catch {
       setError(new Error('XYO Gateway not available'))