@towns-labs/react-sdk 2.0.1

package/dist/types/useUserSpaces.d.ts

@@ -0,0 +1,32 @@
+import type { Spaces } from '@towns-labs/sdk';
+import type { ObservableConfig } from './useObservable';
+/**
+ * Hook to get the spaces of the current user.
+ * @param config - Configuration options for the observable.
+ * @returns The list of all space ids of the current user.
+ * @example
+ * You can combine this hook with the `useSpace` hook to get all spaces of the current user and render them:
+ *
+ * ```tsx
+ * import { useUserSpaces, useSpace } from '@towns-labs/react-sdk'
+ *
+ * const AllSpaces = () => {
+ *     const { spaceIds } = useUserSpaces()
+ *     return <>{spaceIds.map((spaceId) => <Space key={spaceId} spaceId={spaceId} />)}</>
+ * }
+ *
+ * const Space = ({ spaceId }: { spaceId: string }) => {
+ *     const { data: space } = useSpace(spaceId)
+ *     return <div>{space.metadata?.name || 'Unnamed Space'}</div>
+ * }
+ * ```
+ */
+export declare const useUserSpaces: (config?: ObservableConfig.FromObservable<Spaces>) => {
+    error: Error | undefined;
+    status: "loading" | "loaded" | "error";
+    isLoading: boolean;
+    isError: boolean;
+    isLoaded: boolean;
+    spaceIds: string[];
+};
+//# sourceMappingURL=useUserSpaces.d.ts.map

package/dist/types/useUserSpaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUserSpaces.d.ts","sourceRoot":"","sources":["../../src/useUserSpaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAGvD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,GAAI,SAAS,gBAAgB,CAAC,cAAc,CAAC,MAAM,CAAC;;;;;;;CAG7E,CAAA"}

package/dist/types/utils.d.ts

@@ -0,0 +1,3 @@
+import { type Channel, type Dm, type Gdm, Space, type SyncAgent } from '@towns-labs/sdk';
+export declare const getRoom: (sync: SyncAgent, streamId: string) => Gdm | Channel | Dm | Space;
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,OAAO,EACZ,KAAK,EAAE,EACP,KAAK,GAAG,EACR,KAAK,EACL,KAAK,SAAS,EAMjB,MAAM,iBAAiB,CAAA;AAExB,eAAO,MAAM,OAAO,GAAI,MAAM,SAAS,EAAE,UAAU,MAAM,KAAG,GAAG,GAAG,OAAO,GAAG,EAAE,GAAG,KAchF,CAAA"}

package/package.json

@@ -0,0 +1,75 @@
+{
+    "name": "@towns-labs/react-sdk",
+    "description": "React Hooks for Towns Protocol SDK",
+    "version": "2.0.1",
+    "type": "module",
+    "main": "./dist/esm/index.js",
+    "types": "./dist/types/index.d.ts",
+    "scripts": {
+        "build": "bun run clean && bun run build:esm+types",
+        "build:esm+types": "tsc --project tsconfig.build.json --outDir ./dist/esm --declaration --declarationMap --declarationDir ./dist/types",
+        "clean": "rm -rf dist tsconfig.tsbuildinfo",
+        "gen": "bun run gen:extractor && bun run gen:docs",
+        "gen:docs": "tsx ./scripts/docgen/generate.ts",
+        "gen:extractor": "api-extractor run --local",
+        "lint": "eslint ./src --max-warnings=0",
+        "test:build": "publint --strict && attw --pack --ignore-rules cjs-resolves-to-esm",
+        "typecheck": "tsc --noEmit",
+        "watch": "bun run build -w"
+    },
+    "dependencies": {
+        "@towns-labs/proto": "^1.0.1",
+        "@towns-labs/sdk": "^1.0.1",
+        "@towns-labs/web3": "^1.0.1",
+        "ethers": "^5.8.0"
+    },
+    "devDependencies": {
+        "@microsoft/api-extractor": "^7.52.2",
+        "@microsoft/api-extractor-model": "^7.30.5",
+        "@microsoft/tsdoc": "^0.15.0",
+        "@microsoft/tsdoc-config": "^0.17.0",
+        "@types/node": "^20.14.8",
+        "@types/react": "^19.1.16",
+        "@types/react-dom": "^19.1.7",
+        "@typescript-eslint/eslint-plugin": "^8.29.0",
+        "@typescript-eslint/parser": "^8.29.0",
+        "eslint": "^8.57.1",
+        "eslint-plugin-import-x": "^4.10.2",
+        "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-tsdoc": "^0.3.0",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "ts-morph": "^24.0.0",
+        "tsx": "^4.7.1",
+        "typescript": "~5.8.3"
+    },
+    "files": [
+        "dist/**",
+        "!dist/**/*.tsbuildinfo",
+        "src/**/*.ts",
+        "!src/**/*.test.ts",
+        "!src/**/*.test-d.ts"
+    ],
+    "keywords": [
+        "hooks",
+        "react",
+        "river",
+        "sdk",
+        "web3"
+    ],
+    "peerDependencies": {
+        "react": "^18.2 || ^19.0",
+        "typescript": "^5"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/towns-protocol/towns.git",
+        "directory": "packages/react"
+    },
+    "sideEffects": false,
+    "typings": "./dist/types/index.d.ts"
+}

package/src/connectTowns.ts

@@ -0,0 +1,63 @@
+/// This file can be used on server side to create a Towns Protocol Client
+/// We don't want a 'use client' directive here
+import {
+    type SignerContext,
+    SyncAgent,
+    type SyncAgentConfig,
+    makeSignerContext,
+    makeSignerContextFromBearerToken,
+} from '@towns-labs/sdk'
+import { ethers } from 'ethers'
+
+const defaultConfig: Partial<SyncAgentConfig> = {
+    unpackEnvelopeOpts: {
+        disableSignatureValidation: true,
+    },
+}
+
+/**
+ * Sign and connect to Towns using a Signer and a random delegate wallet every time
+ * @param signer - The signer to use
+ * @param config - The configuration for the sync agent
+ * @returns The sync agent
+ */
+export const signAndConnect = async (
+    signer: ethers.Signer,
+    config: Omit<SyncAgentConfig, 'context'>,
+): Promise<SyncAgent> => {
+    const delegateWallet = ethers.Wallet.createRandom()
+    const signerContext = await makeSignerContext(signer, delegateWallet)
+    return new SyncAgent({ context: signerContext, ...defaultConfig, ...config })
+}
+
+/**
+ * Connect to Towns using a SignerContext
+ *
+ * Useful for server side code, allowing you to persist the signer context and use it to auth with Towns later
+ * @param signerContext - The signer context to use
+ * @param config - The configuration for the sync agent
+ * @returns The sync agent
+ */
+export const connectTowns = async (
+    signerContext: SignerContext,
+    config: Omit<SyncAgentConfig, 'context'>,
+): Promise<SyncAgent> => {
+    return new SyncAgent({ context: signerContext, ...defaultConfig, ...config })
+}
+
+/**
+ * Connect to Towns using a Bearer Token
+ * Towns clients can use this to connect to Towns Protocol on behalf of a user
+ *
+ * Useful for server side code, allowing you to persist the signer context and use it to auth with Towns later
+ * @param token - The bearer token to use
+ * @param config - The configuration for the sync agent
+ * @returns The sync agent
+ */
+export const connectTownsWithBearerToken = async (
+    token: string,
+    config: Omit<SyncAgentConfig, 'context'>,
+): Promise<SyncAgent> => {
+    const signerContext = await makeSignerContextFromBearerToken(token)
+    return new SyncAgent({ context: signerContext, ...defaultConfig, ...config })
+}

package/src/index.ts

@@ -0,0 +1,34 @@
+/**************************************************************************
+ * This file is generated by running 🏕️ scripts/generate_sdk_index.sh 🏕️ *
+ **************************************************************************/
+export * from './TownsSyncProvider'
+export * from './connectTowns'
+export * from './useAdminRedact'
+export * from './useAgentConnection'
+export * from './useChannel'
+export * from './useCreateChannel'
+export * from './useCreateDm'
+export * from './useCreateGdm'
+export * from './useCreateSpace'
+export * from './useDm'
+export * from './useGdm'
+export * from './useJoinSpace'
+export * from './useMember'
+export * from './useMemberList'
+export * from './useMyMember'
+export * from './useObservable'
+export * from './useReactions'
+export * from './useRedact'
+export * from './useScrollback'
+export * from './useSendMessage'
+export * from './useSendReaction'
+export * from './useSpace'
+export * from './useSyncAgent'
+export * from './useThreads'
+export * from './useTimeline'
+export * from './useTowns'
+export * from './useTownsAuthStatus'
+export * from './useUserDms'
+export * from './useUserGdms'
+export * from './useUserSpaces'
+export * from './utils'

package/src/internals/TownsSyncContext.ts

@@ -0,0 +1,12 @@
+'use client'
+import { SyncAgent } from '@towns-labs/sdk'
+import { createContext } from 'react'
+
+type TownsSyncContextProps = {
+    syncAgent: SyncAgent | undefined
+    setSyncAgent: (syncAgent: SyncAgent | undefined) => void
+    config?: {
+        onTokenExpired?: () => void
+    }
+}
+export const TownsSyncContext = createContext<TownsSyncContextProps | undefined>(undefined)

package/src/internals/useAction.ts

@@ -0,0 +1,84 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * Configuration options for an action.
+ * It can be used to configure the behavior of the useAction hook.
+ */
+export type ActionConfig<Action> = {
+    /** Callback function to be called when an error occurs while executing the action. */
+    onError?: (err: Error) => void
+    /** Callback function to be called when the action is successful. */
+    onSuccess?: (data: ReturnOf<Action>) => void
+}
+
+type MultipleParams<T> = T extends unknown[] ? T : [T]
+
+type ActionFn<T> = T extends (...args: infer Args) => Promise<infer Return>
+    ? (...args: Args) => Promise<Return>
+    : never
+
+type ParamsOf<T> = Parameters<ActionFn<T>>
+type ReturnOf<T> = Awaited<ReturnType<ActionFn<T>>>
+
+/**
+ * Hook to create an action from a namespace.
+ * @internal
+ * @param namespace - The namespace to create the action from.
+ * @param fnName - The name of the action to create. Example: `Namespace.fnName`
+ * @param config - Configuration options for the action.
+ * @returns The action and its loading state.
+ */
+export const useAction = <Namespace, Key extends keyof Namespace, Fn extends Namespace[Key]>(
+    namespace: Namespace | undefined,
+    fnName: Key & string,
+    config?: ActionConfig<Fn>,
+) => {
+    const [status, setStatus] = useState<'loading' | 'error' | 'success' | 'idle'>('idle')
+    const [error, setError] = useState<Error | undefined>()
+    const [data, setData] = useState<ReturnOf<Fn> | undefined>()
+
+    const action = useCallback(
+        async (...args: MultipleParams<ParamsOf<Fn>>): Promise<ReturnOf<Fn>> => {
+            if (!namespace) {
+                throw new Error(`useAction: namespace is undefined`)
+            }
+            const fn = namespace[fnName] as ActionFn<Fn>
+            if (typeof fn !== 'function') {
+                throw new Error(`useAction: fn ${fnName} is not a function`)
+            }
+            setStatus('loading')
+            try {
+                const data = (await fn.apply(namespace, args)) as ReturnOf<Fn>
+                setData(data)
+                setStatus('success')
+                config?.onSuccess?.(data)
+                return data as ReturnOf<Fn>
+            } catch (error: unknown) {
+                setStatus('error')
+                if (error instanceof Error) {
+                    setError(error)
+                    config?.onError?.(error)
+                }
+                // Let the caller handle the error
+                throw error
+            } finally {
+                setStatus('idle')
+            }
+        },
+        [config, fnName, namespace],
+    )
+    return {
+        /** The action to execute. */
+        action,
+        /** The data returned by the action. */
+        data,
+        /** The error that occurred while executing the action. */
+        error,
+        /** Whether the action is pending. */
+        isPending: status === 'loading',
+        /** Whether the action is successful. */
+        isSuccess: status === 'success',
+        /** Whether the action is in error. */
+        isError: status === 'error',
+    }
+}

package/src/internals/useTownsSync.ts

@@ -0,0 +1,4 @@
+'use client'
+import { useContext } from 'react'
+import { TownsSyncContext } from './TownsSyncContext'
+export const useTownsSync = () => useContext(TownsSyncContext)

package/src/internals/utils.ts

@@ -0,0 +1,11 @@
+import type { PersistedModel } from '@towns-labs/sdk'
+
+export const isPersistedModel = <T>(value: T | PersistedModel<T>): value is PersistedModel<T> => {
+    if (typeof value !== 'object') {
+        return false
+    }
+    if (value === null) {
+        return false
+    }
+    return 'status' in value && 'data' in value
+}

package/src/useAdminRedact.ts

@@ -0,0 +1,45 @@
+'use client'
+
+import { Channel, Space, assert } from '@towns-labs/sdk'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { useSyncAgent } from './useSyncAgent'
+import { getRoom } from './utils'
+
+/**
+ * Hook to redact any message in a channel if you're an admin.
+ * @example
+ *
+ * ### Redact a message
+ *
+ * You can use `adminRedact` to redact a message in a stream.
+ * ```ts
+ * import { useAdminRedact } from '@towns-labs/react-sdk'
+ *
+ * const { adminRedact } = useAdminRedact(streamId)
+ * adminRedact({ eventId: messageEventId })
+ * ```
+ *
+ * ### Redact a message reaction
+ *
+ * You can also use `redact` to redact a message reaction in a stream.
+ * ```ts
+ * import { useRedact } from '@towns-labs/react-sdk'
+ *
+ * const { redact } = useRedact(streamId)
+ * redact({ eventId: reactionEventId })
+ * ```
+ * @param streamId - The id of the stream to redact the message in.
+ * @param config - Configuration options for the action.
+ * @returns The `redact` action and its loading state.
+ */
+export const useAdminRedact = (streamId: string, config?: ActionConfig<Channel['adminRedact']>) => {
+    const sync = useSyncAgent()
+    const room = getRoom(sync, streamId)
+    assert(!(room instanceof Space), 'Spaces dont have timeline to redact')
+    const { action: adminRedact, ...rest } = useAction(room, 'adminRedact', config)
+
+    return {
+        adminRedact,
+        ...rest,
+    }
+}

package/src/useAgentConnection.ts

@@ -0,0 +1,143 @@
+import type { SyncAgentConfig } from '@towns-labs/sdk'
+import { useCallback, useMemo, useState } from 'react'
+import type { ethers } from 'ethers'
+import { connectTownsWithBearerToken, signAndConnect } from './connectTowns'
+import { useTownsSync } from './internals/useTownsSync'
+
+type AgentConnectConfig = Omit<SyncAgentConfig, 'context' | 'onTokenExpired'>
+
+/**
+ * Hook for managing the connection to the sync agent
+ *
+ * @example You can connect the Sync Agent to Towns Protocol using a Bearer Token or using a Signer.
+ *
+ * ### Bearer Token
+ * ```tsx
+ * import { useAgentConnection } from '@towns-labs/react-sdk'
+ * import { townsEnv } from '@towns-labs/sdk'
+ * import { useState } from 'react'
+ *
+ * const townsConfig = townsEnv().makeTownsConfig('beta')
+ *
+ * const Login = () => {
+ *   const { connectUsingBearerToken, isAgentConnecting, isAgentConnected } = useAgentConnection()
+ *   const [bearerToken, setBearerToken] = useState('')
+ *
+ *   return (
+ *     <>
+ *       <input value={bearerToken} onChange={(e) => setBearerToken(e.target.value)} />
+ *       <button onClick={() => connectUsingBearerToken(bearerToken, { townsConfig })}>
+ *         Login
+ *       </button>
+ *       {isAgentConnecting && <span>Connecting... ⏳</span>}
+ *       {isAgentConnected && <span>Connected ✅</span>}
+ *     </>
+ *   )
+ * }
+ * ```
+ *
+ * ### Signer
+ *
+ * If you're using Wagmi and Viem, you can use the [`useEthersSigner`](https://wagmi.sh/react/guides/ethers#usage-1) hook to get an ethers.js v5 Signer from a Viem Wallet Client.
+ *
+ * ```tsx
+ * import { useAgentConnection } from '@towns-labs/react-sdk'
+ * import { townsEnv } from '@towns-labs/sdk'
+ * import { useEthersSigner } from './utils/viem-to-ethers'
+ *
+ * const townsConfig = townsEnv().makeTownsConfig('beta')
+ *
+ * const Login = () => {
+ *   const { connect, isAgentConnecting, isAgentConnected } = useAgentConnection()
+ *   const signer = useEthersSigner()
+ *
+ *   return (
+ *     <>
+ *       <button onClick={async () => {
+ *         if (!signer) {
+ *           return
+ *         }
+ *         connect(signer, { townsConfig })
+ *       }}>
+ *         Login
+ *       </button>
+ *       {isAgentConnecting && <span>Connecting... ⏳</span>}
+ *       {isAgentConnected && <span>Connected ✅</span>}
+ *     </>
+ *   )
+ * }
+ * ```
+ *
+ * @returns The connection state and methods (connect, connectUsingBearerToken, disconnect)
+ */
+export const useAgentConnection = () => {
+    const [isAgentConnecting, setConnecting] = useState(false)
+    const towns = useTownsSync()
+
+    const connect = useCallback(
+        async (signer: ethers.Signer, config: AgentConnectConfig) => {
+            if (towns?.syncAgent) {
+                return
+            }
+            const mergedConfig = {
+                ...config,
+                ...towns?.config,
+                onTokenExpired: () => {
+                    towns?.config?.onTokenExpired?.()
+                    towns?.setSyncAgent(undefined)
+                },
+            }
+            setConnecting(true)
+            return signAndConnect(signer, mergedConfig)
+                .then((syncAgent) => {
+                    towns?.setSyncAgent(syncAgent)
+                    return syncAgent
+                })
+                .finally(() => setConnecting(false))
+        },
+        [towns],
+    )
+
+    const connectUsingBearerToken = useCallback(
+        async (bearerToken: string, config: AgentConnectConfig) => {
+            if (towns?.syncAgent) {
+                return
+            }
+            const mergedConfig = {
+                ...config,
+                ...towns?.config,
+                onTokenExpired: () => {
+                    towns?.config?.onTokenExpired?.()
+                    towns?.setSyncAgent(undefined)
+                },
+            }
+            setConnecting(true)
+            return connectTownsWithBearerToken(bearerToken, mergedConfig)
+                .then((syncAgent) => {
+                    towns?.setSyncAgent(syncAgent)
+                    return syncAgent
+                })
+                .finally(() => setConnecting(false))
+        },
+        [towns],
+    )
+
+    const disconnect = useCallback(() => towns?.setSyncAgent(undefined), [towns])
+
+    const isAgentConnected = useMemo(() => !!towns?.syncAgent, [towns])
+
+    return {
+        /** Connect to Towns Protocol using a Signer */
+        connect,
+        /** Connect to Towns Protocol using a Bearer Token */
+        connectUsingBearerToken,
+        /** Disconnect from Towns Protocol */
+        disconnect,
+        /** Whether the agent is currently connecting */
+        isAgentConnecting,
+        /** Whether the agent is connected */
+        isAgentConnected,
+        /** The environment of the current connection (beta, omega, alpha, local_dev, etc.) */
+        env: towns?.syncAgent?.config.townsConfig.environmentId,
+    }
+}

package/src/useChannel.ts

@@ -0,0 +1,27 @@
+'use client'
+
+import { useMemo } from 'react'
+import type { Channel } from '@towns-labs/sdk'
+import { useSyncAgent } from './useSyncAgent'
+import { type ObservableConfig, useObservable } from './useObservable'
+
+/**
+ * Hook to get data about a channel.
+ * You can use this hook to get channel metadata and if the user has joined the channel.
+ * @param spaceId - The id of the space the channel belongs to.
+ * @param channelId - The id of the channel to get data about.
+ * @param config - Configuration options for the observable.
+ * @returns The ChannelModel data.
+ */
+export const useChannel = (
+    spaceId: string,
+    channelId: string,
+    config?: ObservableConfig.FromObservable<Channel>,
+) => {
+    const sync = useSyncAgent()
+    const channel = useMemo(
+        () => sync.spaces.getSpace(spaceId).getChannel(channelId),
+        [sync.spaces, spaceId, channelId],
+    )
+    return useObservable(channel, config)
+}

package/src/useCreateChannel.ts

@@ -0,0 +1,30 @@
+'use client'
+
+import type { Space } from '@towns-labs/sdk'
+import { useMemo } from 'react'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { useSyncAgent } from './useSyncAgent'
+
+/**
+ * Hook to create a channel.
+ * @param config - Configuration options for the action.
+ * @returns The `createChannel` action and its loading state.
+ */
+export const useCreateChannel = (
+    spaceId: string,
+    config?: ActionConfig<Space['createChannel']>,
+) => {
+    const sync = useSyncAgent()
+    const space = useMemo(() => sync.spaces.getSpace(spaceId), [spaceId, sync.spaces])
+    const { action: createChannel, ...rest } = useAction(space, 'createChannel', config)
+
+    return {
+        /**
+         * Action to create a channel.
+         * @param name - The name of the channel to create.
+         * @param signer - The signer to use to create the channel.
+         */
+        createChannel,
+        ...rest,
+    }
+}

package/src/useCreateDm.ts

@@ -0,0 +1,25 @@
+'use client'
+
+import type { Dms } from '@towns-labs/sdk'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { useSyncAgent } from './useSyncAgent'
+
+/**
+ * A hook that allows you to create a new direct message (DM).
+ * @param config - The action config.
+ * @returns An object containing the `createDM` action and the rest of the action result.
+ */
+export const useCreateDm = (config?: ActionConfig<Dms['createDM']>) => {
+    const sync = useSyncAgent()
+    const { action: createDM, ...rest } = useAction(sync.dms, 'createDM', config)
+
+    return {
+        /**
+         * Creates a new DM.
+         * @param userId - The `userId` of the user to create a DM with.
+         * @returns A promise that resolves to the result of the create operation.
+         */
+        createDM,
+        ...rest,
+    }
+}

package/src/useCreateGdm.ts

@@ -0,0 +1,25 @@
+'use client'
+
+import type { Gdms } from '@towns-labs/sdk'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { useSyncAgent } from './useSyncAgent'
+
+/**
+ * A hook that allows you to create a new group direct message (GDM).
+ * @param config - The action config.
+ * @returns An object containing the `createGDM` action and the rest of the action result.
+ */
+export const useCreateGdm = (config?: ActionConfig<Gdms['createGDM']>) => {
+    const sync = useSyncAgent()
+    const { action: createGDM, ...rest } = useAction(sync.gdms, 'createGDM', config)
+
+    return {
+        /**
+         * Creates a new GDM.
+         * @param userIds - The `userIds` of the users to invite to the GDM.
+         * @returns A promise that resolves to the result of the create operation.
+         */
+        createGDM,
+        ...rest,
+    }
+}

package/src/useCreateSpace.ts

@@ -0,0 +1,25 @@
+'use client'
+
+import type { Spaces } from '@towns-labs/sdk'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { useSyncAgent } from './useSyncAgent'
+
+/**
+ * Hook to create a space.
+ * @param config - Configuration options for the action.
+ * @returns The `createSpace` action and its loading state.
+ */
+export const useCreateSpace = (config: ActionConfig<Spaces['createSpace']> = {}) => {
+    const sync = useSyncAgent()
+    const { action: createSpace, ...rest } = useAction(sync.spaces, 'createSpace', config)
+
+    return {
+        /**
+         * Action to create a space.
+         * @param opts - Options for the create space action.
+         * @param signer - The signer used to create the space.
+         */
+        createSpace,
+        ...rest,
+    }
+}