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

package/src/story/GatewayDecorator.tsx

@@ -0,0 +1,36 @@
+import type { Decorator } from '@storybook/react-vite'
+import {
+  LocalNetwork, MainNetwork, SequenceNetwork,
+} from '@xyo-network/xl1-sdk'
+
+import { GatewayProvider, InPageGatewaysProvider } from '../contexts/index.ts'
+
+export const MainnetGatewayDecorator: Decorator = (Story, ...args) => {
+  return (
+    <InPageGatewaysProvider>
+      <GatewayProvider gatewayName={MainNetwork.id}>
+        <Story {...args} />
+      </GatewayProvider>
+    </InPageGatewaysProvider>
+  )
+}
+
+export const SequenceGatewayDecorator: Decorator = (Story, ...args) => {
+  return (
+    <InPageGatewaysProvider>
+      <GatewayProvider gatewayName={SequenceNetwork.id}>
+        <Story {...args} />
+      </GatewayProvider>
+    </InPageGatewaysProvider>
+  )
+}
+
+export const LocalGatewayDecorator: Decorator = (Story, ...args) => {
+  return (
+    <InPageGatewaysProvider>
+      <GatewayProvider gatewayName={LocalNetwork.id}>
+        <Story {...args} />
+      </GatewayProvider>
+    </InPageGatewaysProvider>
+  )
+}

package/src/story/index.ts

@@ -0,0 +1 @@
+export * from './GatewayDecorator.tsx'

package/dist/browser/hooks/useHttpRpcRunner.d.ts

@@ -1,3 +0,0 @@
-import type { JsonRpcXyoRunner } from '@xyo-network/xl1-sdk';
-export declare const useHttpRpcRunner: (url?: string) => [import("@xyo-network/xl1-sdk").CreatableProviderInstance<JsonRpcXyoRunner> | undefined, Error | undefined, import("@xylabs/react-promise").UsePromiseState | undefined];
-//# sourceMappingURL=useHttpRpcRunner.d.ts.map

package/dist/browser/hooks/useHttpRpcRunner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useHttpRpcRunner.d.ts","sourceRoot":"","sources":["../../../src/hooks/useHttpRpcRunner.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EACjB,MAAM,sBAAsB,CAAA;AAM7B,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,6KAgB5C,CAAA"}

package/dist/browser/hooks/viewer/useHttpRpcViewer.d.ts

@@ -1,4 +0,0 @@
-import type { NetworkBootstrap, XyoViewer } from '@xyo-network/xl1-sdk';
-/** @deprecated - use useViewerFromGateway */
-export declare const useHttpRpcViewer: (urlOrNetwork?: string | NetworkBootstrap) => XyoViewer | undefined;
-//# sourceMappingURL=useHttpRpcViewer.d.ts.map

package/dist/browser/hooks/viewer/useHttpRpcViewer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useHttpRpcViewer.d.ts","sourceRoot":"","sources":["../../../../src/hooks/viewer/useHttpRpcViewer.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,gBAAgB,EAEhB,SAAS,EACV,MAAM,sBAAsB,CAAA;AAiD7B,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,GAAI,eAAe,MAAM,GAAG,gBAAgB,KAAG,SAAS,GAAG,SAiBvF,CAAA"}

package/dist/browser/hooks/viewer/useViewerFromWallet.d.ts

@@ -1,9 +0,0 @@
-import type { GatewayName } from '@xyo-network/xl1-sdk';
-/**
- * Creates a JsonRpcXyoViewer instance based on the provided networkId.
- * @param networkId - a network id like 'sequence', 'local', etc.
- * @returns An instance of XyoViewer if the networkId is found in wallet gateways
- * otherwise undefined.
- */
-export declare const useViewerFromWallet: (networkId?: GatewayName, timeout?: number) => [import("@xyo-network/xl1-sdk").XyoViewer | null | undefined, Error | undefined, import("@xylabs/react-promise").UsePromiseState | undefined];
-//# sourceMappingURL=useViewerFromWallet.d.ts.map

package/dist/browser/hooks/viewer/useViewerFromWallet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useViewerFromWallet.d.ts","sourceRoot":"","sources":["../../../../src/hooks/viewer/useViewerFromWallet.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAIvD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAC9B,YAAY,WAAW,EACvB,UAAU,MAAM,kJAsBjB,CAAA"}

package/src/hooks/useHttpRpcRunner.ts

@@ -1,27 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import { isUndefined } from '@xylabs/sdk-js'
-import type {
-  JsonRpcXyoRunner, RpcSchemaMap, TransportFactory,
-} from '@xyo-network/xl1-sdk'
-import {
-  AccountBalanceViewerRpcSchemas, buildJsonRpcProviderLocator, HttpRpcTransport, JsonRpcAccountBalanceViewer, SimpleTransactionViewer, XyoRunnerMoniker,
-} from '@xyo-network/xl1-sdk'
-
-/* @deprecated use useRunnerFromGateway */
-export const useHttpRpcRunner = (url?: string) => {
-  return usePromise(async () => {
-    if (isUndefined(url)) {
-      return
-    }
-    const transportFactory: TransportFactory = (schemas: RpcSchemaMap) => new HttpRpcTransport(`${url}/rpc`, schemas)
-    const locator = await buildJsonRpcProviderLocator({ transportFactory })
-
-    // Additional dependencies to get working viewer
-    locator.register(SimpleTransactionViewer.factory<SimpleTransactionViewer>(SimpleTransactionViewer.dependencies, {}))
-    locator.register(JsonRpcAccountBalanceViewer.factory<JsonRpcAccountBalanceViewer>(
-      JsonRpcAccountBalanceViewer.dependencies,
-      { transport: await transportFactory(AccountBalanceViewerRpcSchemas) },
-    ))
-    return await locator.getInstance<JsonRpcXyoRunner>(XyoRunnerMoniker)
-  }, [url])
-}

package/src/hooks/viewer/useHttpRpcViewer.stories.tsx

@@ -1,67 +0,0 @@
-import {
-  Alert, Button, Stack,
-} from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { isDefined } from '@xylabs/sdk-js'
-import { isXyoGlobal } from '@xyo-network/react-chain-model'
-import type { HydratedBlock } from '@xyo-network/xl1-sdk'
-import { SequenceNetwork } from '@xyo-network/xl1-sdk'
-import React, { useState } from 'react'
-
-import { useHttpRpcViewer } from './useHttpRpcViewer.ts'
-
-const hasXyoGlobal = isXyoGlobal(globalThis.xyo)
-const inIframe = globalThis.self !== window.top
-
-const UseHttpRpcViewerStoryTemplate: React.FC = () => {
-  const viewer = useHttpRpcViewer(SequenceNetwork.url)
-  const [error, setError] = useState<Error | null>(null)
-  const [result, setResult] = useState<HydratedBlock | null | undefined>()
-
-  const handleClick = async () => {
-    if (isDefined(viewer)) {
-      try {
-        const block = await viewer.currentBlock()
-        setError(null)
-        setResult(block)
-      } catch (err) {
-        setError(err as Error)
-        setResult(undefined)
-      }
-    }
-  }
-
-  return (
-    <Stack gap={2} alignItems="center">
-      {inIframe
-        ? (
-            <Alert severity="warning">
-              This story is running in an iframe. Please run it in a standalone browser window to test the wallet extension.
-            </Alert>
-          )
-        : null}
-      <Alert severity="info">
-        {hasXyoGlobal ? 'Wallet extension found. Using it for viewer.' : 'No wallet extension found. Falling back to the default viewer.'}
-      </Alert>
-      <Button variant="contained" onClick={() => void handleClick()} disabled={!isDefined(viewer)}>
-        Get Current Block
-      </Button>
-      <pre>
-        {JSON.stringify(result, null, 2)}
-      </pre>
-      {error ? <Alert severity="error">{error.message}</Alert> : null}
-    </Stack>
-  )
-}
-
-export default {
-  title: 'provider/useHttpRpcViewer',
-  component: UseHttpRpcViewerStoryTemplate,
-} as Meta
-
-export const Template: StoryFn<typeof UseHttpRpcViewerStoryTemplate> = args => <UseHttpRpcViewerStoryTemplate {...args} />
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }

package/src/hooks/viewer/useHttpRpcViewer.ts

@@ -1,76 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import {
-  isDefined, isString, isUndefined,
-} from '@xylabs/sdk-js'
-import type {
-  NetworkBootstrap, RestDataLakeViewerParams, RpcSchemaMap,
-  TransportFactory,
-  XyoViewer,
-} from '@xyo-network/xl1-sdk'
-import {
-  AccountBalanceViewerRpcSchemas,
-  buildJsonRpcProviderLocator, HttpRpcTransport, JsonRpcAccountBalanceViewer,
-  JsonRpcXyoViewer, NetworkDataLakeUrls, RestDataLakeViewer, SimpleTransactionViewer, XyoViewerMoniker, XyoViewerRpcSchemas,
-} from '@xyo-network/xl1-sdk'
-
-import { ViewerWithDataLake } from './ViewerWithDataLake.ts'
-
-const buildLocatorParams = (urlOrNetwork: string | NetworkBootstrap) => {
-  // conditionally build params for transport factory and datalake viewer based on if urlOrNetwork is a string or NetworkBootstrap
-  let transportFactory: TransportFactory
-  let dataLakeViewerParams: { endpoint: string } | undefined
-  if (isString(urlOrNetwork)) {
-    const url = urlOrNetwork
-    transportFactory = (schemas: RpcSchemaMap) => new HttpRpcTransport(`${url}/rpc`, schemas)
-  } else {
-    transportFactory = (schemas: RpcSchemaMap) => new HttpRpcTransport(`${urlOrNetwork.url}/rpc`, schemas)
-    dataLakeViewerParams = { endpoint: NetworkDataLakeUrls[urlOrNetwork.id] }
-  }
-
-  return { transportFactory, dataLakeViewerParams }
-}
-
-const buildLocator = async (transportFactory: TransportFactory, dataLakeViewerParams: { endpoint: string } | undefined) => {
-  // build locator with transport factory
-  const locator = await buildJsonRpcProviderLocator({ transportFactory })
-
-  locator.register(JsonRpcAccountBalanceViewer.factory<JsonRpcAccountBalanceViewer>(
-    JsonRpcAccountBalanceViewer.dependencies,
-    { transport: await transportFactory(AccountBalanceViewerRpcSchemas) },
-  ))
-  locator.register(SimpleTransactionViewer.factory<SimpleTransactionViewer>(SimpleTransactionViewer.dependencies, {}))
-
-  // If the network has a datalake endpoint, register the RestDataLakeViewer with the locator
-  if (isDefined(dataLakeViewerParams)) {
-    locator.register(
-      RestDataLakeViewer.factory<RestDataLakeViewer>(RestDataLakeViewer.dependencies, dataLakeViewerParams as RestDataLakeViewerParams),
-    )
-  }
-
-  // register the viewer with data lake as the JsonRpcXyoViewer
-  locator.register(
-    ViewerWithDataLake.factory<JsonRpcXyoViewer>(JsonRpcXyoViewer.dependencies, { transport: await transportFactory(XyoViewerRpcSchemas) }),
-  )
-
-  return locator
-}
-
-/** @deprecated - use useViewerFromGateway */
-export const useHttpRpcViewer = (urlOrNetwork?: string | NetworkBootstrap): XyoViewer | undefined => {
-  const [resolvedViewer] = usePromise(async () => {
-    if (isUndefined(urlOrNetwork)) {
-      return
-    }
-
-    // conditionally build params for transport factory and datalake viewer based on if urlOrNetwork is a string or NetworkBootstrap
-    const { transportFactory, dataLakeViewerParams } = buildLocatorParams(urlOrNetwork)
-
-    // get and return the viewer from the locator
-    const locator = await buildLocator(transportFactory, dataLakeViewerParams)
-
-    // return viewer instance from locator
-    return await locator.getInstance<JsonRpcXyoViewer>(XyoViewerMoniker)
-  }, [urlOrNetwork])
-
-  return resolvedViewer as XyoViewer | undefined
-}

package/src/hooks/viewer/useViewerFromWallet.stories.tsx

@@ -1,75 +0,0 @@
-import { Alert, Stack } from '@mui/material'
-import type { StoryFn } from '@storybook/react-vite'
-import { ButtonEx } from '@xylabs/react-button'
-import { isDefined, isDefinedNotNull } from '@xylabs/sdk-js'
-import { isXyoGlobal } from '@xyo-network/react-chain-model'
-import type { HydratedBlock } from '@xyo-network/xl1-sdk'
-import { MainNetwork } from '@xyo-network/xl1-sdk'
-import React, { useState } from 'react'
-
-import { useViewerFromWallet } from './useViewerFromWallet.ts'
-
-const hasXyoGlobal = isXyoGlobal(globalThis.xyo)
-const inIframe = globalThis.self !== window.top
-
-const UseViewerFromWalletStoryTemplate: React.FC = () => {
-  const defaultDestination = MainNetwork.id
-  const [viewer] = useViewerFromWallet(defaultDestination)
-  const [error, setError] = useState<Error | null>(null)
-  const [result, setResult] = useState<HydratedBlock | null | undefined>()
-  const [loading, setLoading] = useState(false)
-
-  const handleClick = async () => {
-    if (isDefinedNotNull(viewer)) {
-      try {
-        setLoading(true)
-        const block = await viewer.currentBlock()
-        setError(null)
-        setResult(block)
-        setLoading(false)
-      } catch (err) {
-        setError(err as Error)
-        setResult(undefined)
-        setLoading(false)
-      }
-    }
-  }
-
-  return (
-    <Stack gap={2} alignItems="center">
-      {inIframe
-        ? (
-            <Alert severity="warning">
-              This story is running in an iframe. Please run it in a standalone browser window to test the wallet extension.
-            </Alert>
-          )
-        : null}
-      {hasXyoGlobal
-        ? null
-        : (
-            <Alert severity="warning">
-              No wallet extension found. Please install the Xyo Wallet Chrome Extension.
-            </Alert>
-          )}
-      <ButtonEx loading={loading} variant="contained" onClick={() => void handleClick()} disabled={!isDefined(viewer)}>
-        Get Current Block
-      </ButtonEx>
-      <pre>
-        {JSON.stringify(result, null, 2)}
-      </pre>
-      {error ? <Alert severity="error">{error.message}</Alert> : null}
-    </Stack>
-  )
-}
-
-export default {
-  title: 'provider/useViewerFromWallet',
-  component: UseViewerFromWalletStoryTemplate,
-}
-
-export const Template: StoryFn<typeof UseViewerFromWalletStoryTemplate> = args => <UseViewerFromWalletStoryTemplate {...args} />
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }

package/src/hooks/viewer/useViewerFromWallet.ts

@@ -1,39 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import {
-  isDefined, isDefinedNotNull, isNull,
-} from '@xylabs/sdk-js'
-import type { GatewayName } from '@xyo-network/xl1-sdk'
-
-import { useGatewayFromWallet } from '../client/index.ts'
-
-/**
- * Creates a JsonRpcXyoViewer instance based on the provided networkId.
- * @param networkId - a network id like 'sequence', 'local', etc.
- * @returns An instance of XyoViewer if the networkId is found in wallet gateways
- * otherwise undefined.
- */
-export const useViewerFromWallet = (
-  networkId?: GatewayName,
-  timeout?: number,
-) => {
-  const {
-    gateway, error, isLoading, timedout,
-  } = useGatewayFromWallet(networkId, timeout)
-
-  const result = usePromise(async () => {
-    await Promise.resolve() // ensure async
-    // if there is an error, bail early and return null
-    if (isDefinedNotNull(error)) return null
-    // if the request timed out and there is no gateway, return null
-    if (timedout && isNull(gateway)) return null
-    // if the check is still loading, return undefined
-    if (isLoading) return
-    // if the gateway was found and networkId passed, return the viewer from the gateway
-    if (isDefined(gateway) && isDefined(networkId)) {
-      const connection = gateway?.connection
-      return connection?.viewer
-    }
-  }, [gateway, networkId, timeout])
-
-  return result
-}