@bigmi/react 0.0.0-preview-aab0339

package/src/hooks/useConnect.ts

@@ -0,0 +1,90 @@
+'use client'
+
+import {
+  type Config,
+  type ConnectData,
+  type ConnectErrorType,
+  type ConnectMutate,
+  type ConnectMutateAsync,
+  type ConnectVariables,
+  connectMutationOptions,
+} from '@bigmi/client'
+import type { Compute } from '@bigmi/core'
+import { useMutation } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import type { ResolvedRegister } from '../types.js'
+import type {
+  UseMutationParameters,
+  UseMutationReturnType,
+} from '../utils/query.js'
+import { type ConfigParameter, useConfig } from './useConfig.js'
+import { type UseConnectorsReturnType, useConnectors } from './useConnectors.js'
+
+export type UseConnectParameters<
+  config extends Config = Config,
+  context = unknown,
+> = Compute<
+  ConfigParameter<config> & {
+    mutation?:
+      | UseMutationParameters<
+          ConnectData<config>,
+          ConnectErrorType,
+          ConnectVariables<config, config['connectors'][number]>,
+          context
+        >
+      | undefined
+  }
+>
+
+export type UseConnectReturnType<
+  config extends Config = Config,
+  context = unknown,
+> = Compute<
+  UseMutationReturnType<
+    ConnectData<config>,
+    ConnectErrorType,
+    ConnectVariables<config, config['connectors'][number]>,
+    context
+  > & {
+    connect: ConnectMutate<config, context>
+    connectAsync: ConnectMutateAsync<config, context>
+    connectors: Compute<UseConnectorsReturnType> | config['connectors']
+  }
+>
+
+export function useConnect<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: UseConnectParameters<config, context> = {}
+): UseConnectReturnType<config, context> {
+  const { mutation } = parameters
+
+  const config = useConfig(parameters)
+
+  const mutationOptions = connectMutationOptions(config)
+  const { mutate, mutateAsync, reset, ...result } = useMutation({
+    ...mutation,
+    ...mutationOptions,
+  })
+
+  // Reset mutation back to an idle state when the connector disconnects.
+  useEffect(() => {
+    return config.subscribe(
+      ({ status }) => status,
+      (status, previousStatus) => {
+        if (previousStatus === 'connected' && status === 'disconnected') {
+          reset()
+        }
+      }
+    )
+  }, [config, reset])
+
+  type Return = UseConnectReturnType<config, context>
+  return {
+    ...(result as Return),
+    connect: mutate as Return['connect'],
+    connectAsync: mutateAsync as Return['connectAsync'],
+    connectors: useConnectors({ config }),
+  }
+}

package/src/hooks/useConnectors.ts

@@ -0,0 +1,33 @@
+'use client'
+
+import {
+  type Config,
+  type GetConnectorsReturnType,
+  getConnectors,
+  watchConnectors,
+} from '@bigmi/client'
+import { useSyncExternalStore } from 'react'
+import type { ResolvedRegister } from '../types.js'
+import { type ConfigParameter, useConfig } from './useConfig.js'
+
+export type UseConnectorsParameters<config extends Config = Config> =
+  ConfigParameter<config>
+
+export type UseConnectorsReturnType<config extends Config = Config> =
+  GetConnectorsReturnType<config>
+
+const EMPTY_CONNECTORS: readonly [] = []
+
+export function useConnectors<
+  config extends Config = ResolvedRegister['config'],
+>(
+  parameters: UseConnectorsParameters<config> = {}
+): UseConnectorsReturnType<config> {
+  const config = useConfig(parameters)
+
+  return useSyncExternalStore(
+    (onChange) => watchConnectors(config, { onChange }),
+    () => getConnectors(config),
+    () => EMPTY_CONNECTORS as UseConnectorsReturnType<config>
+  )
+}

package/src/hooks/useReconnect.ts

@@ -0,0 +1,11 @@
+'use client'
+
+import { type Config, reconnect } from '@bigmi/client'
+
+import { useEffect } from 'react'
+
+export const useReconnect = (config: Config): void => {
+  useEffect(() => {
+    reconnect(config)
+  }, [config])
+}

package/src/hooks/useSyncExternalStoreWithTracked.ts

@@ -0,0 +1,76 @@
+'use client'
+import { deepEqual } from '@bigmi/core'
+import { useMemo, useRef, useSyncExternalStore } from 'react'
+
+const isPlainObject = (obj: unknown): obj is Record<string, any> =>
+  typeof obj === 'object' && !Array.isArray(obj)
+
+export function useSyncExternalStoreWithTracked<
+  Snapshot extends Selection,
+  Selection = Snapshot,
+>(
+  subscribe: (onStoreChange: () => void) => () => void,
+  getSnapshot: () => Snapshot,
+  getServerSnapshot: (() => Snapshot) | undefined = getSnapshot,
+  isEqual: (a: Selection, b: Selection) => boolean = deepEqual
+): Selection {
+  const trackedKeys = useRef<Set<string>>(new Set())
+  const previousResult = useRef<Selection | undefined>(undefined)
+  const snapshotCache = useRef(getSnapshot())
+
+  const snapshot = useSyncExternalStore(
+    (onChange) =>
+      subscribe(() => {
+        snapshotCache.current = getSnapshot()
+        onChange()
+      }),
+    () => snapshotCache.current!,
+    getServerSnapshot
+  )
+
+  const result = useMemo(() => {
+    if (!isPlainObject(snapshot)) {
+      return snapshot
+    }
+
+    const trackedResult = { ...snapshot }
+    Object.defineProperties(
+      trackedResult,
+      Object.fromEntries(
+        Object.entries(trackedResult).map(([key, value]) => [
+          key,
+          {
+            configurable: false,
+            enumerable: true,
+            get: () => {
+              trackedKeys.current.add(key)
+              return value
+            },
+          },
+        ])
+      )
+    )
+    return trackedResult
+  }, [snapshot])
+
+  return useMemo(() => {
+    if (!trackedKeys.current.size || !previousResult.current) {
+      previousResult.current = result
+      return result
+    }
+
+    const hasChanged = Array.from(trackedKeys.current).some(
+      (key) =>
+        !isEqual(
+          (result as Record<string, Selection>)[key],
+          (previousResult.current as Record<string, Selection>)[key]
+        )
+    )
+
+    if (!hasChanged) {
+      return previousResult.current
+    }
+    previousResult.current = result
+    return result
+  }, [result, isEqual])
+}

package/src/hydrate.ts

@@ -0,0 +1,86 @@
+'use client'
+
+import { type Config, reconnect, type State } from '@bigmi/client'
+
+import { type ReactElement, useEffect, useRef } from 'react'
+
+import type { ResolvedRegister } from './types.js'
+
+export type HydrateProps = {
+  config: ResolvedRegister['config']
+  initialState?: State | undefined
+  reconnectOnMount?: boolean | undefined
+}
+
+type HydrateParameters = {
+  initialState?: State | undefined
+  reconnectOnMount?: boolean | undefined
+}
+
+export function hydrate(
+  config: Config,
+  parameters: HydrateParameters
+): { onMount(): Promise<void> } {
+  const { initialState, reconnectOnMount } = parameters
+
+  if (initialState && !config._internal.store.persist.hasHydrated()) {
+    config.setState({
+      ...initialState,
+      chainId: config.chains.some((x) => x.id === initialState.chainId)
+        ? initialState.chainId
+        : config.chains[0].id,
+      connections: reconnectOnMount ? initialState.connections : new Map(),
+      status: reconnectOnMount ? 'reconnecting' : 'disconnected',
+    })
+  }
+
+  return {
+    async onMount(): Promise<void> {
+      if (config._internal.ssr) {
+        await config._internal.store.persist.rehydrate()
+      }
+
+      if (reconnectOnMount) {
+        reconnect(config)
+      } else if (config.storage) {
+        // Reset connections that may have been hydrated from storage.
+        config.setState((x) => ({
+          ...x,
+          connections: new Map(),
+        }))
+      }
+    },
+  }
+}
+
+export function Hydrate(parameters: React.PropsWithChildren<HydrateProps>) {
+  const { children, config, initialState, reconnectOnMount = true } = parameters
+
+  const { onMount } = hydrate(config, {
+    initialState,
+    reconnectOnMount,
+  })
+
+  // Hydrate for non-SSR
+  if (!config._internal.ssr) {
+    onMount()
+  }
+
+  // Hydrate for SSR
+  const active = useRef(true)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `queryKey` not required
+  useEffect(() => {
+    if (!active.current) {
+      return
+    }
+    if (!config._internal.ssr) {
+      return
+    }
+    onMount()
+    return () => {
+      active.current = false
+    }
+  }, [])
+
+  return children as ReactElement
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export type { BigmiProviderProps } from './context.js'
+export { BigmiContext, BigmiProvider } from './context.js'
+export { useAccount } from './hooks/useAccount.js'
+export { useConfig } from './hooks/useConfig.js'
+export { useConnect } from './hooks/useConnect.js'
+export { useReconnect } from './hooks/useReconnect.js'

package/src/types.ts

@@ -0,0 +1,9 @@
+import type { Config } from '@bigmi/client'
+
+// biome-ignore lint/complexity/noBannedTypes: part of the types
+export type Register = {}
+export type ResolvedRegister = {
+  config: Register extends { config: infer config extends Config }
+    ? config
+    : Config
+}

package/src/utils/query.ts

@@ -0,0 +1,31 @@
+'use client'
+
+import type { Compute, UnionStrictOmit } from '@bigmi/core'
+import type {
+  UseMutationOptions,
+  UseMutationResult,
+} from '@tanstack/react-query'
+
+export type UseMutationParameters<
+  data = unknown,
+  error = Error,
+  variables = void,
+  context = unknown,
+> = Compute<
+  Omit<
+    UseMutationOptions<data, error, Compute<variables>, context>,
+    'mutationFn' | 'mutationKey' | 'throwOnError'
+  >
+>
+
+export type UseMutationReturnType<
+  data = unknown,
+  error = Error,
+  variables = void,
+  context = unknown,
+> = Compute<
+  UnionStrictOmit<
+    UseMutationResult<data, error, variables, context>,
+    'mutate' | 'mutateAsync'
+  >
+>

package/src/version.ts

@@ -0,0 +1,2 @@
+export const name = '@bigmi/react'
+export const version = '0.0.0-preview-aab0339'