@growae/reactive-react 0.0.1

package/src/hooks/useTransferName.ts

@@ -0,0 +1,53 @@
+'use client'
+
+import { useMutation } from '@tanstack/react-query'
+import {
+  type TransferNameParameters,
+  type TransferNameReturnType,
+  transferName,
+} from '@growae/reactive'
+import type { Compute } from '@growae/reactive'
+import type { ConfigParameter } from '../types/properties.js'
+import type { UseMutationReturnType } from '../utils/query.js'
+import { useConfig } from './useConfig.js'
+
+export type UseTransferNameParameters<context = unknown> = Compute<
+  ConfigParameter & {
+    mutation?: {
+      onSuccess?: (data: TransferNameReturnType, variables: TransferNameParameters, context: context) => void
+      onError?: (error: Error, variables: TransferNameParameters, context: context) => void
+    }
+  }
+>
+
+export type UseTransferNameReturnType<context = unknown> = Compute<
+  UseMutationReturnType<
+    TransferNameReturnType,
+    Error,
+    TransferNameParameters,
+    context
+  > & {
+    transferName: (variables: TransferNameParameters) => void
+    transferNameAsync: (variables: TransferNameParameters) => Promise<TransferNameReturnType>
+  }
+>
+
+export function useTransferName<context = unknown>(
+  parameters: UseTransferNameParameters<context> = {},
+): UseTransferNameReturnType<context> {
+  const config = useConfig(parameters)
+
+  const mutation = useMutation({
+    mutationKey: ['transferName'],
+    mutationFn: (variables: TransferNameParameters) =>
+      transferName(config, variables),
+    ...parameters.mutation,
+  })
+
+  type Return = UseTransferNameReturnType<context>
+  return {
+    ...(mutation as unknown as Return),
+    transferName: mutation.mutate as Return['transferName'],
+    transferNameAsync: mutation.mutateAsync as Return['transferNameAsync'],
+  }
+}

package/src/hooks/useUpdateName.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import { useUpdateName } from './useUpdateName.js'
+
+describe('useUpdateName', () => {
+  it('should be a function', () => {
+    expect(typeof useUpdateName).toBe('function')
+  })
+
+  it('should be exported', () => {
+    expect(useUpdateName).toBeDefined()
+  })
+})

package/src/hooks/useUpdateName.ts

@@ -0,0 +1,53 @@
+'use client'
+
+import { useMutation } from '@tanstack/react-query'
+import {
+  type UpdateNameParameters,
+  type UpdateNameReturnType,
+  updateName,
+} from '@growae/reactive'
+import type { Compute } from '@growae/reactive'
+import type { ConfigParameter } from '../types/properties.js'
+import type { UseMutationReturnType } from '../utils/query.js'
+import { useConfig } from './useConfig.js'
+
+export type UseUpdateNameParameters<context = unknown> = Compute<
+  ConfigParameter & {
+    mutation?: {
+      onSuccess?: (data: UpdateNameReturnType, variables: UpdateNameParameters, context: context) => void
+      onError?: (error: Error, variables: UpdateNameParameters, context: context) => void
+    }
+  }
+>
+
+export type UseUpdateNameReturnType<context = unknown> = Compute<
+  UseMutationReturnType<
+    UpdateNameReturnType,
+    Error,
+    UpdateNameParameters,
+    context
+  > & {
+    updateName: (variables: UpdateNameParameters) => void
+    updateNameAsync: (variables: UpdateNameParameters) => Promise<UpdateNameReturnType>
+  }
+>
+
+export function useUpdateName<context = unknown>(
+  parameters: UseUpdateNameParameters<context> = {},
+): UseUpdateNameReturnType<context> {
+  const config = useConfig(parameters)
+
+  const mutation = useMutation({
+    mutationKey: ['updateName'],
+    mutationFn: (variables: UpdateNameParameters) =>
+      updateName(config, variables),
+    ...parameters.mutation,
+  })
+
+  type Return = UseUpdateNameReturnType<context>
+  return {
+    ...(mutation as unknown as Return),
+    updateName: mutation.mutate as Return['updateName'],
+    updateNameAsync: mutation.mutateAsync as Return['updateNameAsync'],
+  }
+}

package/src/hooks/useVerifyMessage.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import { useVerifyMessage } from './useVerifyMessage.js'
+
+describe('useVerifyMessage', () => {
+  it('should be a function', () => {
+    expect(typeof useVerifyMessage).toBe('function')
+  })
+
+  it('should be exported', () => {
+    expect(useVerifyMessage).toBeDefined()
+  })
+})

package/src/hooks/useVerifyMessage.ts

@@ -0,0 +1,39 @@
+'use client'
+
+import {
+  type VerifyMessageParameters,
+  type VerifyMessageReturnType,
+  type VerifyMessageErrorType,
+  verifyMessage,
+} from '@growae/reactive'
+import type { Compute } from '@growae/reactive'
+import { type UseQueryReturnType, useQuery } from '../utils/query.js'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseVerifyMessageParameters = Compute<
+  VerifyMessageParameters & ConfigParameter & { enabled?: boolean }
+>
+
+export type UseVerifyMessageReturnType = UseQueryReturnType<
+  VerifyMessageReturnType,
+  VerifyMessageErrorType
+>
+
+export function useVerifyMessage(
+  parameters: UseVerifyMessageParameters = {} as UseVerifyMessageParameters,
+): UseVerifyMessageReturnType {
+  const config = useConfig(parameters)
+
+  return useQuery({
+    queryKey: ['verifyMessage', {
+      message: parameters.message,
+      signature: parameters.signature,
+      address: parameters.address,
+    }],
+    queryFn: () => verifyMessage(config, parameters),
+    enabled: Boolean(
+      parameters.message && parameters.signature && parameters.address,
+    ) && (parameters.enabled ?? true),
+  }) as UseVerifyMessageReturnType
+}

package/src/hooks/useVerifyTypedData.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import { useVerifyTypedData } from './useVerifyTypedData.js'
+
+describe('useVerifyTypedData', () => {
+  it('should be a function', () => {
+    expect(typeof useVerifyTypedData).toBe('function')
+  })
+
+  it('should be exported', () => {
+    expect(useVerifyTypedData).toBeDefined()
+  })
+})

package/src/hooks/useVerifyTypedData.ts

@@ -0,0 +1,39 @@
+'use client'
+
+import {
+  type VerifyTypedDataParameters,
+  type VerifyTypedDataReturnType,
+  type VerifyTypedDataErrorType,
+  verifyTypedData,
+} from '@growae/reactive'
+import type { Compute } from '@growae/reactive'
+import { type UseQueryReturnType, useQuery } from '../utils/query.js'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseVerifyTypedDataParameters = Compute<
+  VerifyTypedDataParameters & ConfigParameter & { enabled?: boolean }
+>
+
+export type UseVerifyTypedDataReturnType = UseQueryReturnType<
+  VerifyTypedDataReturnType,
+  VerifyTypedDataErrorType
+>
+
+export function useVerifyTypedData(
+  parameters: UseVerifyTypedDataParameters = {} as UseVerifyTypedDataParameters,
+): UseVerifyTypedDataReturnType {
+  const config = useConfig(parameters)
+
+  return useQuery({
+    queryKey: ['verifyTypedData', {
+      data: parameters.data,
+      signature: parameters.signature,
+      address: parameters.address,
+    }],
+    queryFn: () => verifyTypedData(config, parameters),
+    enabled: Boolean(
+      parameters.data && parameters.signature && parameters.address,
+    ) && (parameters.enabled ?? true),
+  }) as UseVerifyTypedDataReturnType
+}

package/src/hooks/useWaitForTransaction.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import { useWaitForTransaction } from './useWaitForTransaction.js'
+
+describe('useWaitForTransaction', () => {
+  it('should be a function', () => {
+    expect(typeof useWaitForTransaction).toBe('function')
+  })
+
+  it('should be exported', () => {
+    expect(useWaitForTransaction).toBeDefined()
+  })
+})

package/src/hooks/useWaitForTransaction.ts

@@ -0,0 +1,41 @@
+'use client'
+
+import {
+  type WaitForTransactionParameters,
+  type WaitForTransactionReturnType,
+  type WaitForTransactionErrorType,
+  waitForTransaction,
+} from '@growae/reactive'
+import type { Compute } from '@growae/reactive'
+import { type UseQueryReturnType, useQuery } from '../utils/query.js'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+import { useNetworkId } from './useNetworkId.js'
+
+export type UseWaitForTransactionParameters = Compute<
+  WaitForTransactionParameters & ConfigParameter & { enabled?: boolean }
+>
+
+export type UseWaitForTransactionReturnType = UseQueryReturnType<
+  WaitForTransactionReturnType,
+  WaitForTransactionErrorType
+>
+
+export function useWaitForTransaction(
+  parameters: UseWaitForTransactionParameters = {} as UseWaitForTransactionParameters,
+): UseWaitForTransactionReturnType {
+  const config = useConfig(parameters)
+  const networkId = useNetworkId({ config })
+
+  return useQuery({
+    queryKey: ['waitForTransaction', {
+      hash: parameters.hash,
+      networkId: parameters.networkId ?? networkId,
+    }],
+    queryFn: () => waitForTransaction(config, {
+      ...parameters,
+      networkId: parameters.networkId ?? networkId,
+    }),
+    enabled: Boolean(parameters.hash) && (parameters.enabled ?? true),
+  }) as UseWaitForTransactionReturnType
+}

package/src/hooks/useWatchConnection.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import { useWatchConnection } from './useWatchConnection.js'
+
+describe('useWatchConnection', () => {
+  it('should be a function', () => {
+    expect(typeof useWatchConnection).toBe('function')
+  })
+
+  it('should be exported', () => {
+    expect(useWatchConnection).toBeDefined()
+  })
+})

package/src/hooks/useWatchConnection.ts

@@ -0,0 +1,34 @@
+'use client'
+
+import { watchConnection } from '@growae/reactive'
+import type { Connection, Compute } from '@growae/reactive'
+import { useEffect, useRef } from 'react'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseWatchConnectionParameters = Compute<
+  ConfigParameter & {
+    onChange: (connection: Connection | undefined) => void
+    enabled?: boolean
+  }
+>
+
+export type UseWatchConnectionReturnType = void
+
+export function useWatchConnection(
+  parameters: UseWatchConnectionParameters,
+): UseWatchConnectionReturnType {
+  const { enabled = true } = parameters
+  const config = useConfig(parameters)
+
+  const onChangeRef = useRef(parameters.onChange)
+  onChangeRef.current = parameters.onChange
+
+  useEffect(() => {
+    if (!enabled) return
+    if (!onChangeRef.current) return
+    return watchConnection(config, {
+      onChange: (connection) => onChangeRef.current?.(connection),
+    })
+  }, [config, enabled])
+}

package/src/hooks/useWatchConnectors.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import { useWatchConnectors } from './useWatchConnectors.js'
+
+describe('useWatchConnectors', () => {
+  it('should be a function', () => {
+    expect(typeof useWatchConnectors).toBe('function')
+  })
+
+  it('should be exported', () => {
+    expect(useWatchConnectors).toBeDefined()
+  })
+})

package/src/hooks/useWatchConnectors.ts

@@ -0,0 +1,34 @@
+'use client'
+
+import { watchConnectors } from '@growae/reactive'
+import type { Connector, Compute } from '@growae/reactive'
+import { useEffect, useRef } from 'react'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseWatchConnectorsParameters = Compute<
+  ConfigParameter & {
+    onChange: (connectors: readonly Connector[]) => void
+    enabled?: boolean
+  }
+>
+
+export type UseWatchConnectorsReturnType = void
+
+export function useWatchConnectors(
+  parameters: UseWatchConnectorsParameters,
+): UseWatchConnectorsReturnType {
+  const { enabled = true } = parameters
+  const config = useConfig(parameters)
+
+  const onChangeRef = useRef(parameters.onChange)
+  onChangeRef.current = parameters.onChange
+
+  useEffect(() => {
+    if (!enabled) return
+    if (!onChangeRef.current) return
+    return watchConnectors(config, {
+      onChange: (connectors) => onChangeRef.current?.(connectors),
+    })
+  }, [config, enabled])
+}

package/src/hooks/useWatchHeight.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import { useWatchHeight } from './useWatchHeight.js'
+
+describe('useWatchHeight', () => {
+  it('should be a function', () => {
+    expect(typeof useWatchHeight).toBe('function')
+  })
+
+  it('should be exported', () => {
+    expect(useWatchHeight).toBeDefined()
+  })
+})

package/src/hooks/useWatchHeight.ts

@@ -0,0 +1,45 @@
+'use client'
+
+import { watchHeight } from '@growae/reactive'
+import type { Compute } from '@growae/reactive'
+import { useEffect, useRef } from 'react'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+import { useNetworkId } from './useNetworkId.js'
+
+export type UseWatchHeightParameters = Compute<
+  ConfigParameter & {
+    onHeight: (height: number) => void
+    onError?: (error: Error) => void
+    enabled?: boolean
+    interval?: number
+    networkId?: string
+  }
+>
+
+export type UseWatchHeightReturnType = void
+
+export function useWatchHeight(
+  parameters: UseWatchHeightParameters,
+): UseWatchHeightReturnType {
+  const { enabled = true, interval, networkId: paramNetworkId } = parameters
+  const config = useConfig(parameters)
+  const configNetworkId = useNetworkId({ config })
+  const networkId = paramNetworkId ?? configNetworkId
+
+  const onHeightRef = useRef(parameters.onHeight)
+  const onErrorRef = useRef(parameters.onError)
+  onHeightRef.current = parameters.onHeight
+  onErrorRef.current = parameters.onError
+
+  useEffect(() => {
+    if (!enabled) return
+    if (!onHeightRef.current) return
+    return watchHeight(config, {
+      onChange: (height) => onHeightRef.current?.(height),
+      onError: (error) => onErrorRef.current?.(error),
+      interval,
+      networkId,
+    })
+  }, [config, enabled, interval, networkId])
+}

package/src/hydrate.ts

@@ -0,0 +1,34 @@
+'use client'
+
+import { hydrate } from '@growae/reactive'
+import type { Config, State } from '@growae/reactive'
+import { type ReactElement, useEffect, useRef } from 'react'
+
+export type HydrateProps = {
+  config: Config
+  initialState?: State | undefined
+  reconnectOnMount?: boolean | undefined
+}
+
+export function Hydrate(parameters: React.PropsWithChildren<HydrateProps>) {
+  const { children, config, initialState, reconnectOnMount = true } = parameters
+
+  const { onMount } = hydrate(config, {
+    initialState,
+    reconnectOnMount,
+  })
+
+  if (!config._internal.ssr) onMount()
+
+  const active = useRef(true)
+  useEffect(() => {
+    if (!active.current) return
+    if (!config._internal.ssr) return
+    onMount()
+    return () => {
+      active.current = false
+    }
+  }, [])
+
+  return children as ReactElement
+}

package/src/types/properties.ts

@@ -0,0 +1,9 @@
+import type { Config } from '@growae/reactive'
+
+export type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+export type EnabledParameter = {
+  enabled?: boolean | undefined
+}

package/src/utils/query.ts

@@ -0,0 +1,80 @@
+'use client'
+
+import {
+  type DefaultError,
+  type MutateFunction,
+  type QueryKey,
+  useQuery as tanstack_useQuery,
+  type UseMutationOptions,
+  type UseMutationResult,
+  type UseQueryOptions,
+  type UseQueryResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { hashFn } from '@growae/reactive/query'
+import type { Compute, ExactPartial, LooseOmit, UnionStrictOmit } from '@growae/reactive'
+
+export { useMutation }
+
+export type UseMutationParameters<
+  data = unknown,
+  error = Error,
+  variables = void,
+  context = unknown,
+> = Compute<
+  LooseOmit<
+    UseMutationOptions<data, error, Compute<variables>, context>,
+    'mutationFn' | 'mutationKey' | 'throwOnError'
+  >
+>
+
+export type UseMutationReturnType<
+  data = unknown,
+  error = Error,
+  variables = void,
+  context = unknown,
+  mutate = MutateFunction,
+  mutateAsync = MutateFunction,
+> = Compute<
+  UnionStrictOmit<
+    UseMutationResult<data, error, variables, context>,
+    'mutate' | 'mutateAsync'
+  > & {
+    mutate: mutate
+    mutateAsync: mutateAsync
+  }
+>
+
+export function useQuery<queryFnData, error, data, queryKey extends QueryKey>(
+  parameters: UseQueryParameters<queryFnData, error, data, queryKey> & {
+    queryKey: QueryKey
+  },
+): UseQueryReturnType<data, error> {
+  const result = tanstack_useQuery({
+    ...(parameters as any),
+    queryKeyHashFn: hashFn,
+  }) as UseQueryReturnType<data, error>
+  result.queryKey = parameters.queryKey
+  return result
+}
+
+export type UseQueryParameters<
+  queryFnData = unknown,
+  error = DefaultError,
+  data = queryFnData,
+  queryKey extends QueryKey = QueryKey,
+> = Compute<
+  ExactPartial<
+    LooseOmit<UseQueryOptions<queryFnData, error, data, queryKey>, 'initialData'>
+  > & {
+    initialData?:
+      | UseQueryOptions<queryFnData, error, data, queryKey>['initialData']
+      | undefined
+  }
+>
+
+export type UseQueryReturnType<data = unknown, error = DefaultError> = Compute<
+  UseQueryResult<data, error> & {
+    queryKey: QueryKey
+  }
+>

package/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist/esm",
+    "declarationDir": "dist/types",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test-d.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.test.ts", "src/**/*.test-d.ts"]
+}