@growae/reactive-react 0.0.1

package/src/hooks/useBlock.test.ts

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

package/src/hooks/useBlock.ts

@@ -0,0 +1,42 @@
+'use client'
+
+import {
+  type GetBlockParameters,
+  type GetBlockReturnType,
+  type GetBlockErrorType,
+  getBlock,
+} 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 UseBlockParameters = Compute<
+  GetBlockParameters & ConfigParameter & { enabled?: boolean }
+>
+
+export type UseBlockReturnType = UseQueryReturnType<
+  GetBlockReturnType,
+  GetBlockErrorType
+>
+
+export function useBlock(
+  parameters: UseBlockParameters = {},
+): UseBlockReturnType {
+  const config = useConfig(parameters)
+  const networkId = useNetworkId({ config })
+
+  return useQuery({
+    queryKey: ['block', {
+      height: parameters.height,
+      hash: parameters.hash,
+      networkId: parameters.networkId ?? networkId,
+    }],
+    queryFn: () => getBlock(config, {
+      ...parameters,
+      networkId: parameters.networkId ?? networkId,
+    }),
+    enabled: parameters.enabled ?? true,
+  }) as UseBlockReturnType
+}

package/src/hooks/useCallContract.test.ts

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

package/src/hooks/useCallContract.ts

@@ -0,0 +1,54 @@
+'use client'
+
+import { useMutation } from '@tanstack/react-query'
+import {
+  type CallContractParameters,
+  type CallContractReturnType,
+  type CallContractErrorType,
+  callContract,
+} 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 UseCallContractParameters<context = unknown> = Compute<
+  ConfigParameter & {
+    mutation?: {
+      onSuccess?: (data: CallContractReturnType, variables: CallContractParameters, context: context) => void
+      onError?: (error: CallContractErrorType, variables: CallContractParameters, context: context) => void
+    }
+  }
+>
+
+export type UseCallContractReturnType<context = unknown> = Compute<
+  UseMutationReturnType<
+    CallContractReturnType,
+    CallContractErrorType,
+    CallContractParameters,
+    context
+  > & {
+    callContract: (variables: CallContractParameters) => void
+    callContractAsync: (variables: CallContractParameters) => Promise<CallContractReturnType>
+  }
+>
+
+export function useCallContract<context = unknown>(
+  parameters: UseCallContractParameters<context> = {},
+): UseCallContractReturnType<context> {
+  const config = useConfig(parameters)
+
+  const mutation = useMutation({
+    mutationKey: ['callContract'],
+    mutationFn: (variables: CallContractParameters) =>
+      callContract(config, variables),
+    ...parameters.mutation,
+  })
+
+  type Return = UseCallContractReturnType<context>
+  return {
+    ...(mutation as unknown as Return),
+    callContract: mutation.mutate as Return['callContract'],
+    callContractAsync: mutation.mutateAsync as Return['callContractAsync'],
+  }
+}

package/src/hooks/useChannelDeposit.test.ts

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

package/src/hooks/useChannelDeposit.ts

@@ -0,0 +1,53 @@
+'use client'
+
+import { useMutation } from '@tanstack/react-query'
+import {
+  type ChannelDepositParameters,
+  type ChannelDepositReturnType,
+  channelDeposit,
+} 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 UseChannelDepositParameters<context = unknown> = Compute<
+  ConfigParameter & {
+    mutation?: {
+      onSuccess?: (data: ChannelDepositReturnType, variables: ChannelDepositParameters, context: context) => void
+      onError?: (error: Error, variables: ChannelDepositParameters, context: context) => void
+    }
+  }
+>
+
+export type UseChannelDepositReturnType<context = unknown> = Compute<
+  UseMutationReturnType<
+    ChannelDepositReturnType,
+    Error,
+    ChannelDepositParameters,
+    context
+  > & {
+    channelDeposit: (variables: ChannelDepositParameters) => void
+    channelDepositAsync: (variables: ChannelDepositParameters) => Promise<ChannelDepositReturnType>
+  }
+>
+
+export function useChannelDeposit<context = unknown>(
+  parameters: UseChannelDepositParameters<context> = {},
+): UseChannelDepositReturnType<context> {
+  const config = useConfig(parameters)
+
+  const mutation = useMutation({
+    mutationKey: ['channelDeposit'],
+    mutationFn: (variables: ChannelDepositParameters) =>
+      channelDeposit(config, variables),
+    ...parameters.mutation,
+  })
+
+  type Return = UseChannelDepositReturnType<context>
+  return {
+    ...(mutation as unknown as Return),
+    channelDeposit: mutation.mutate as Return['channelDeposit'],
+    channelDepositAsync: mutation.mutateAsync as Return['channelDepositAsync'],
+  }
+}

package/src/hooks/useClaimName.test.ts

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

package/src/hooks/useClaimName.ts

@@ -0,0 +1,53 @@
+'use client'
+
+import { useMutation } from '@tanstack/react-query'
+import {
+  type ClaimNameParameters,
+  type ClaimNameReturnType,
+  claimName,
+} 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 UseClaimNameParameters<context = unknown> = Compute<
+  ConfigParameter & {
+    mutation?: {
+      onSuccess?: (data: ClaimNameReturnType, variables: ClaimNameParameters, context: context) => void
+      onError?: (error: Error, variables: ClaimNameParameters, context: context) => void
+    }
+  }
+>
+
+export type UseClaimNameReturnType<context = unknown> = Compute<
+  UseMutationReturnType<
+    ClaimNameReturnType,
+    Error,
+    ClaimNameParameters,
+    context
+  > & {
+    claimName: (variables: ClaimNameParameters) => void
+    claimNameAsync: (variables: ClaimNameParameters) => Promise<ClaimNameReturnType>
+  }
+>
+
+export function useClaimName<context = unknown>(
+  parameters: UseClaimNameParameters<context> = {},
+): UseClaimNameReturnType<context> {
+  const config = useConfig(parameters)
+
+  const mutation = useMutation({
+    mutationKey: ['claimName'],
+    mutationFn: (variables: ClaimNameParameters) =>
+      claimName(config, variables),
+    ...parameters.mutation,
+  })
+
+  type Return = UseClaimNameReturnType<context>
+  return {
+    ...(mutation as unknown as Return),
+    claimName: mutation.mutate as Return['claimName'],
+    claimNameAsync: mutation.mutateAsync as Return['claimNameAsync'],
+  }
+}

package/src/hooks/useCloseChannel.test.ts

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

package/src/hooks/useCloseChannel.ts

@@ -0,0 +1,53 @@
+'use client'
+
+import { useMutation } from '@tanstack/react-query'
+import {
+  type CloseChannelParameters,
+  type CloseChannelReturnType,
+  closeChannel,
+} 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 UseCloseChannelParameters<context = unknown> = Compute<
+  ConfigParameter & {
+    mutation?: {
+      onSuccess?: (data: CloseChannelReturnType, variables: CloseChannelParameters, context: context) => void
+      onError?: (error: Error, variables: CloseChannelParameters, context: context) => void
+    }
+  }
+>
+
+export type UseCloseChannelReturnType<context = unknown> = Compute<
+  UseMutationReturnType<
+    CloseChannelReturnType,
+    Error,
+    CloseChannelParameters,
+    context
+  > & {
+    closeChannel: (variables: CloseChannelParameters) => void
+    closeChannelAsync: (variables: CloseChannelParameters) => Promise<CloseChannelReturnType>
+  }
+>
+
+export function useCloseChannel<context = unknown>(
+  parameters: UseCloseChannelParameters<context> = {},
+): UseCloseChannelReturnType<context> {
+  const config = useConfig(parameters)
+
+  const mutation = useMutation({
+    mutationKey: ['closeChannel'],
+    mutationFn: (variables: CloseChannelParameters) =>
+      closeChannel(config, variables),
+    ...parameters.mutation,
+  })
+
+  type Return = UseCloseChannelReturnType<context>
+  return {
+    ...(mutation as unknown as Return),
+    closeChannel: mutation.mutate as Return['closeChannel'],
+    closeChannelAsync: mutation.mutateAsync as Return['closeChannelAsync'],
+  }
+}

package/src/hooks/useConfig.test.ts

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest'
+
+vi.mock('@aeternity/aepp-sdk', () => ({
+  Node: vi.fn().mockImplementation(() => ({})),
+}))
+
+import { createElement } from 'react'
+import { renderHook } from '@testing-library/react'
+import { useConfig } from './useConfig.js'
+import { ReactiveProvider } from '../context.js'
+import { createConfig } from '@growae/reactive'
+import { testnet } from '@growae/reactive'
+import { mock } from '@growae/reactive'
+
+const TEST_ACCOUNTS = [
+  'ak_2swhLkgBPeeADxVTABy7tt6d2HgBQFnGJELkBUMY4FUa8RVLM',
+] as const
+
+function createTestConfig() {
+  return createConfig({
+    networks: [testnet],
+    connectors: [mock({ accounts: [...TEST_ACCOUNTS] })],
+    storage: null,
+  })
+}
+
+describe('useConfig', () => {
+  it('should return config when wrapped in ReactiveProvider', () => {
+    const config = createTestConfig()
+    const { result } = renderHook(() => useConfig(), {
+      wrapper: ({ children }) =>
+        createElement(
+          ReactiveProvider,
+          { config, reconnectOnMount: false },
+          children,
+        ),
+    })
+    expect(result.current).toBe(config)
+  })
+
+  it('should throw without ReactiveProvider', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() => renderHook(() => useConfig())).toThrow()
+    spy.mockRestore()
+  })
+
+  it('should accept config via parameter', () => {
+    const config = createTestConfig()
+    const { result } = renderHook(() => useConfig({ config }))
+    expect(result.current).toBe(config)
+  })
+})

package/src/hooks/useConfig.ts

@@ -0,0 +1,20 @@
+'use client'
+
+import type { Config } from '@growae/reactive'
+import { useContext } from 'react'
+import { ReactiveContext } from '../context.js'
+import { ReactiveProviderNotFoundError } from '../errors/context.js'
+import type { ConfigParameter } from '../types/properties.js'
+
+export type UseConfigParameters<config extends Config = Config> =
+  ConfigParameter<config>
+
+export type UseConfigReturnType<config extends Config = Config> = config
+
+export function useConfig<config extends Config = Config>(
+  parameters: UseConfigParameters<config> = {},
+): UseConfigReturnType<config> {
+  const config = parameters.config ?? useContext(ReactiveContext)
+  if (!config) throw new ReactiveProviderNotFoundError()
+  return config as UseConfigReturnType<config>
+}

package/src/hooks/useConnect.test.ts

@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest'
+
+vi.mock('@aeternity/aepp-sdk', () => ({
+  Node: vi.fn().mockImplementation(() => ({})),
+}))
+
+import { createElement } from 'react'
+import { renderHook } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useConnect } from './useConnect.js'
+import { ReactiveProvider } from '../context.js'
+import { createConfig } from '@growae/reactive'
+import { testnet } from '@growae/reactive'
+import { mock } from '@growae/reactive'
+
+const TEST_ACCOUNTS = [
+  'ak_2swhLkgBPeeADxVTABy7tt6d2HgBQFnGJELkBUMY4FUa8RVLM',
+] as const
+
+function createWrapper() {
+  const config = createConfig({
+    networks: [testnet],
+    connectors: [mock({ accounts: [...TEST_ACCOUNTS] })],
+    storage: null,
+  })
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  return {
+    config,
+    wrapper: ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        QueryClientProvider,
+        { client: queryClient },
+        createElement(
+          ReactiveProvider,
+          { config, reconnectOnMount: false },
+          children,
+        ),
+      ),
+  }
+}
+
+describe('useConnect', () => {
+  it('should return connect function', () => {
+    const { wrapper } = createWrapper()
+    const { result } = renderHook(() => useConnect(), { wrapper })
+    expect(typeof result.current.connect).toBe('function')
+    expect(typeof result.current.connectAsync).toBe('function')
+  })
+
+  it('should return connectors', () => {
+    const { wrapper } = createWrapper()
+    const { result } = renderHook(() => useConnect(), { wrapper })
+    expect(result.current.connectors).toBeDefined()
+    expect(result.current.connectors).toHaveLength(1)
+  })
+
+  it('should have idle status initially', () => {
+    const { wrapper } = createWrapper()
+    const { result } = renderHook(() => useConnect(), { wrapper })
+    expect(result.current.isPending).toBe(false)
+    expect(result.current.isSuccess).toBe(false)
+    expect(result.current.isError).toBe(false)
+  })
+})

package/src/hooks/useConnect.ts

@@ -0,0 +1,69 @@
+'use client'
+
+import { useMutation } from '@tanstack/react-query'
+import {
+  type Config,
+  type ConnectParameters,
+  type ConnectReturnType,
+  type ConnectErrorType,
+  connect,
+} from '@growae/reactive'
+import type { Compute } from '@growae/reactive'
+import { useEffect } from 'react'
+import type { ConfigParameter } from '../types/properties.js'
+import type { UseMutationReturnType } from '../utils/query.js'
+import { useConfig } from './useConfig.js'
+import { useConnectors } from './useConnectors.js'
+
+export type UseConnectParameters<context = unknown> = Compute<
+  ConfigParameter & {
+    mutation?: {
+      onSuccess?: (data: ConnectReturnType, variables: ConnectParameters, context: context) => void
+      onError?: (error: ConnectErrorType, variables: ConnectParameters, context: context) => void
+      onSettled?: (data: ConnectReturnType | undefined, error: ConnectErrorType | null, variables: ConnectParameters, context: context) => void
+    }
+  }
+>
+
+export type UseConnectReturnType<context = unknown> = Compute<
+  UseMutationReturnType<
+    ConnectReturnType,
+    ConnectErrorType,
+    ConnectParameters,
+    context
+  > & {
+    connect: (variables: ConnectParameters) => void
+    connectAsync: (variables: ConnectParameters) => Promise<ConnectReturnType>
+    connectors: ReturnType<typeof useConnectors>
+  }
+>
+
+export function useConnect<context = unknown>(
+  parameters: UseConnectParameters<context> = {},
+): UseConnectReturnType<context> {
+  const config = useConfig(parameters)
+
+  const mutation = useMutation({
+    mutationKey: ['connect'],
+    mutationFn: (variables: ConnectParameters) => connect(config, variables),
+    ...parameters.mutation,
+  })
+
+  useEffect(() => {
+    return config.subscribe(
+      ({ status }) => status,
+      (status, previousStatus) => {
+        if (previousStatus === 'connected' && status === 'disconnected')
+          mutation.reset()
+      },
+    )
+  }, [config, mutation.reset])
+
+  type Return = UseConnectReturnType<context>
+  return {
+    ...(mutation as unknown as Return),
+    connect: mutation.mutate as Return['connect'],
+    connectAsync: mutation.mutateAsync as Return['connectAsync'],
+    connectors: useConnectors({ config }),
+  }
+}

package/src/hooks/useConnection.test.ts

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

package/src/hooks/useConnection.ts

@@ -0,0 +1,26 @@
+'use client'
+
+import {
+  type GetConnectionReturnType,
+  getConnection,
+  watchConnection,
+} from '@growae/reactive'
+import { useSyncExternalStore } from 'react'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseConnectionParameters = ConfigParameter
+
+export type UseConnectionReturnType = GetConnectionReturnType
+
+export function useConnection(
+  parameters: UseConnectionParameters = {},
+): UseConnectionReturnType {
+  const config = useConfig(parameters)
+
+  return useSyncExternalStore(
+    (onChange) => watchConnection(config, { onChange }),
+    () => getConnection(config),
+    () => getConnection(config),
+  )
+}

package/src/hooks/useConnections.test.ts

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

package/src/hooks/useConnections.ts

@@ -0,0 +1,26 @@
+'use client'
+
+import {
+  type GetConnectionsReturnType,
+  getConnections,
+  watchConnections,
+} from '@growae/reactive'
+import { useSyncExternalStore } from 'react'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+
+export type UseConnectionsParameters = ConfigParameter
+
+export type UseConnectionsReturnType = GetConnectionsReturnType
+
+export function useConnections(
+  parameters: UseConnectionsParameters = {},
+): UseConnectionsReturnType {
+  const config = useConfig(parameters)
+
+  return useSyncExternalStore(
+    (onChange) => watchConnections(config, { onChange }),
+    () => getConnections(config),
+    () => getConnections(config),
+  )
+}

package/src/hooks/useConnectorClient.test.ts

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

package/src/hooks/useConnectorClient.ts

@@ -0,0 +1,44 @@
+'use client'
+
+import {
+  type GetConnectorClientParameters,
+  type GetConnectorClientReturnType,
+  getConnectorClient,
+} from '@growae/reactive'
+import type { Compute } from '@growae/reactive'
+import { useQuery } from '../utils/query.js'
+import type { UseQueryReturnType } from '../utils/query.js'
+import type { ConfigParameter } from '../types/properties.js'
+import { useConfig } from './useConfig.js'
+import { useConnection } from './useConnection.js'
+import { useNetworkId } from './useNetworkId.js'
+
+export type UseConnectorClientParameters = Compute<
+  GetConnectorClientParameters & ConfigParameter
+>
+
+export type UseConnectorClientReturnType = UseQueryReturnType<
+  GetConnectorClientReturnType,
+  Error
+>
+
+export function useConnectorClient(
+  parameters: UseConnectorClientParameters = {},
+): UseConnectorClientReturnType {
+  const config = useConfig(parameters)
+  const networkId = useNetworkId({ config })
+  const connection = useConnection({ config })
+
+  return useQuery({
+    queryKey: ['connectorClient', {
+      networkId: parameters.networkId ?? networkId,
+      connector: connection?.connector?.uid,
+    }],
+    queryFn: () => getConnectorClient(config, {
+      ...parameters,
+      networkId: parameters.networkId ?? networkId,
+      connector: parameters.connector ?? connection?.connector,
+    }),
+    enabled: !!connection?.connector,
+  }) as UseConnectorClientReturnType
+}