@towns-labs/react-sdk 2.0.1

package/src/useDm.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react'
+import type { DmModel } from '@towns-labs/sdk'
+import { useSyncAgent } from './useSyncAgent'
+import { type ObservableConfig, useObservable } from './useObservable'
+
+/**
+ * Hook to get the data of a DM.
+ * You can use this hook to get DM metadata and if the user has joined the DM.
+ * @param streamId - The id of the DM to get the data of.
+ * @param config - Configuration options for the observable.
+ * @returns The DmModel of the DM.
+ */
+export const useDm = (streamId: string, config?: ObservableConfig.FromData<DmModel>) => {
+    const sync = useSyncAgent()
+    const dm = useMemo(() => sync.dms.getDm(streamId), [streamId, sync])
+    return useObservable(dm, config)
+}

package/src/useGdm.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react'
+import type { GdmModel } from '@towns-labs/sdk'
+import { useSyncAgent } from './useSyncAgent'
+import { type ObservableConfig, useObservable } from './useObservable'
+
+/**
+ * Hook to get the data of a Group DM.
+ * You can use this hook to get Group DM metadata and if the user has joined the Group DM.
+ * @param streamId - The id of the Group DM to get the data of.
+ * @param config - Configuration options for the observable.
+ * @returns The GdmModel of the Group DM.
+ */
+export const useGdm = (streamId: string, config?: ObservableConfig.FromData<GdmModel>) => {
+    const sync = useSyncAgent()
+    const gdm = useMemo(() => sync.gdms.getGdm(streamId), [streamId, sync])
+    return useObservable(gdm, config)
+}

package/src/useJoinSpace.ts

@@ -0,0 +1,26 @@
+'use client'
+
+import type { Spaces } from '@towns-labs/sdk'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { useSyncAgent } from './useSyncAgent'
+
+/**
+ * Hook to join a space.
+ * @param config - Configuration options for the action.
+ * @returns The joinSpace action and the status of the action.
+ */
+export const useJoinSpace = (config?: ActionConfig<Spaces['joinSpace']>) => {
+    const sync = useSyncAgent()
+    const { action: joinSpace, ...rest } = useAction(sync.spaces, 'joinSpace', config)
+
+    return {
+        /**
+         * Action to join a space.
+         * @param spaceId - The id of the space to join.
+         * @param signer - The signer to use to join the space.
+         * @param opts - Options for the join action.
+         */
+        joinSpace,
+        ...rest,
+    }
+}

package/src/useMember.ts

@@ -0,0 +1,45 @@
+import { Member } from '@towns-labs/sdk'
+import { useMemo } from 'react'
+import { useObservable } from './useObservable'
+
+import type { ObservableConfig } from './useObservable'
+import { useSyncAgent } from './useSyncAgent'
+import { getRoom } from './utils'
+
+/**
+ * Hook to get data from a specific member of a Space, GDM, Channel, or DM.
+ * @param props - The streamId and userId of the member to get data from.
+ * @param config - Configuration options for the observable.
+ * @returns The Member data.
+ */
+export const useMember = (
+    props: { streamId: string; userId: string },
+    config?: ObservableConfig.FromObservable<Member>,
+) => {
+    const sync = useSyncAgent()
+    const member = useMemo(
+        () => getRoom(sync, props.streamId).members.get(props.userId),
+        [sync, props],
+    )
+    const { data, ...rest } = useObservable(member, config)
+    return {
+        // Excluding `Member.id` property from the return value, since its a internal store id and can lead to confusion
+        userId: data.userId,
+        streamId: data.streamId,
+        initialized: data.initialized,
+        // username
+        username: data.username,
+        isUsernameConfirmed: data.isUsernameConfirmed,
+        isUsernameEncrypted: data.isUsernameEncrypted,
+        // displayName
+        displayName: data.displayName,
+        isDisplayNameEncrypted: data.isDisplayNameEncrypted,
+        // ensAddress
+        ensAddress: data.ensAddress,
+        // nft
+        nft: data.nft,
+        // membership
+        membership: data.membership,
+        ...rest,
+    }
+}

package/src/useMemberList.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react'
+import type { MembersModel } from '@towns-labs/sdk'
+import { type ObservableConfig, useObservable } from './useObservable'
+import { useSyncAgent } from './useSyncAgent'
+import { getRoom } from './utils'
+
+/**
+ * Hook to get the members userIds of a Space, GDM, Channel, or DM.
+ * Used with useMember to get data from a specific member.
+ * @param streamId - The id of the stream to get the members of.
+ * @param config - Configuration options for the observable.
+ * @returns The MembersModel of the stream, containing the userIds of the members.
+ */
+export const useMemberList = (
+    streamId: string,
+    config?: ObservableConfig.FromData<MembersModel>,
+) => {
+    const sync = useSyncAgent()
+    const members = useMemo(() => getRoom(sync, streamId).members, [sync, streamId])
+    return useObservable(members, config)
+}

package/src/useMyMember.ts

@@ -0,0 +1,83 @@
+import type { Member, Myself, SyncAgent } from '@towns-labs/sdk'
+import { useMemo } from 'react'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { type ObservableConfig, useObservable } from './useObservable'
+import { useSyncAgent } from './useSyncAgent'
+import { getRoom } from './utils'
+
+const getMyMember = (sync: SyncAgent, streamId: string) => getRoom(sync, streamId).members.myself
+
+/**
+ * Hook to get the data of the current user in a stream.
+ * @param streamId - The id of the stream to get the current user of.
+ * @param config - Configuration options for the observable.
+ * @returns The MemberModel of the current user.
+ */
+export const useMyMember = (streamId: string, config?: ObservableConfig.FromObservable<Member>) => {
+    const sync = useSyncAgent()
+    const myself = useMemo(() => getMyMember(sync, streamId), [sync, streamId])
+    const { data } = useObservable(myself.member, config)
+    return {
+        ...data,
+    }
+}
+
+/**
+ * Hook to set the ENS address of the current user in a stream.
+ * You should be validating if the ENS address belongs to the user before setting it.
+ * @param streamId - The id of the stream to set the ENS address of.
+ * @param config - Configuration options for the action.
+ * @returns The `setEnsAddress` action and its loading state.
+ */
+export const useSetEnsAddress = (
+    streamId: string,
+    config?: ActionConfig<Myself['setEnsAddress']>,
+) => {
+    const sync = useSyncAgent()
+    const member = useMemo(() => getMyMember(sync, streamId), [sync, streamId])
+    const { action: setEnsAddress, ...rest } = useAction(member, 'setEnsAddress', config)
+    return { setEnsAddress, ...rest }
+}
+
+/**
+ * Hook to set the username of the current user in a stream.
+ * @param streamId - The id of the stream to set the username of.
+ * @param config - Configuration options for the action.
+ * @returns The `setUsername` action and its loading state.
+ */
+export const useSetUsername = (streamId: string, config?: ActionConfig<Myself['setUsername']>) => {
+    const sync = useSyncAgent()
+    const member = useMemo(() => getMyMember(sync, streamId), [sync, streamId])
+    const { action: setUsername, ...rest } = useAction(member, 'setUsername', config)
+    return { setUsername, ...rest }
+}
+
+/**
+ * Hook to set the display name of the current user in a stream.
+ * @param streamId - The id of the stream to set the display name of.
+ * @param config - Configuration options for the action.
+ * @returns The `setDisplayName` action and its loading state.
+ */
+export const useSetDisplayName = (
+    streamId: string,
+    config?: ActionConfig<Myself['setDisplayName']>,
+) => {
+    const sync = useSyncAgent()
+    const member = useMemo(() => getMyMember(sync, streamId), [sync, streamId])
+    const { action: setDisplayName, ...rest } = useAction(member, 'setDisplayName', config)
+    return { setDisplayName, ...rest }
+}
+
+/**
+ * Hook to set the NFT of the current user in a stream.
+ * You should be validating if the NFT belongs to the user before setting it.
+ * @param streamId - The id of the stream to set the NFT of.
+ * @param config - Configuration options for the action.
+ * @returns The `setNft` action and its loading state.
+ */
+export const useSetNft = (streamId: string, config?: ActionConfig<Myself['setNft']>) => {
+    const sync = useSyncAgent()
+    const member = useMemo(() => getMyMember(sync, streamId), [sync, streamId])
+    const { action: setNft, ...rest } = useAction(member, 'setNft', config)
+    return { setNft, ...rest }
+}

package/src/useObservable.ts

@@ -0,0 +1,129 @@
+'use client'
+import { useCallback, useEffect, useMemo, useSyncExternalStore } from 'react'
+import { type Observable, type PersistedModel } from '@towns-labs/sdk'
+import { isPersistedModel } from './internals/utils'
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace ObservableConfig {
+    /**
+     * Configuration options for an observable.
+     * It can be used to configure the behavior of the `useObservable` hook.
+     */
+    export type FromObservable<Observable_> =
+        Observable_ extends Observable<infer Data> ? FromData<Data> : never
+
+    // TODO: Some util props:
+    // - select: select a subset of the data, or transform it
+    // - remove onError is is not a persisted model data
+    /**
+     * Create configuration options for an observable from the data type.
+     * It can be used to configure the behavior of the `useObservable` hook.
+     */
+    export type FromData<Data> =
+        Data extends PersistedModel<infer UnwrappedData>
+            ? {
+                  /**
+                   * Trigger the update immediately, without waiting for the first update.
+                   * @defaultValue true
+                   */
+                  fireImmediately?: boolean
+                  /** Callback function to be called when the data is updated. */
+                  onUpdate?: (data: UnwrappedData) => void
+                  // TODO: when an error occurs? store errors? RPC error?
+                  /** Callback function to be called when an error occurs. */
+                  onError?: (error: Error) => void
+              }
+            : {
+                  /**
+                   * Trigger the update immediately, without waiting for the first update.
+                   * @defaultValue true
+                   */
+                  fireImmediately?: boolean
+                  /** Callback function to be called when the data is updated. */
+                  onUpdate?: (data: Data) => void
+                  // TODO: when an error occurs? store errors? RPC error?
+                  /** Callback function to be called when an error occurs. */
+                  onError?: (error: Error) => void
+              }
+}
+
+/**
+ * The value returned by the useObservable hook.
+ * If the observable is a PersistedModel, it will include error and status information.
+ */
+export type ObservableValue<T> = {
+    /** The data of the model. */
+    data: T
+    /** If the model is in an error state, this will be the error. */
+    error: Error | undefined
+    /** The status of the model. */
+    status: 'loading' | 'loaded' | 'error'
+    /** True if the model is in a loading state. */
+    isLoading: boolean
+    /** True if the model is in an error state. */
+    isError: boolean
+    /** True if the data is loaded. */
+    isLoaded: boolean
+}
+
+/**
+ * This hook subscribes to an observable and returns the value of the observable.
+ * @param observable - The observable to subscribe to.
+ * @param config - Configuration options for the observable.
+ * @returns The value of the observable.
+ */
+export function useObservable<
+    Model,
+    Data = Model extends PersistedModel<infer UnwrappedData> ? UnwrappedData : Model,
+>(observable: Observable<Model>, config?: ObservableConfig.FromData<Model>): ObservableValue<Data> {
+    const opts = useMemo(() => ({ fireImmediately: true, ...config }), [config])
+
+    const subscribeFn = useCallback(
+        (subFn: () => void) => {
+            return observable.subscribe(subFn, {
+                fireImediately: opts?.fireImmediately,
+            })
+        },
+        [observable, opts?.fireImmediately],
+    )
+
+    const value = useSyncExternalStore(subscribeFn, () => observable.value)
+
+    useEffect(() => {
+        if (isPersistedModel(value)) {
+            if (value.status === 'loaded') {
+                opts.onUpdate?.(value.data)
+            }
+            if (value.status === 'error') {
+                opts.onError?.(value.error)
+            }
+        } else {
+            opts.onUpdate?.(value)
+        }
+    }, [opts, value])
+
+    const data = useMemo(() => {
+        if (isPersistedModel(value)) {
+            const { data, status } = value
+            return {
+                data: data as unknown as Data,
+                error: status === 'error' ? value.error : undefined,
+                status,
+                isLoading: status === 'loading',
+                isError: status === 'error',
+                isLoaded: status === 'loaded',
+            }
+        } else {
+            return {
+                data: value as unknown as Data,
+                error: undefined,
+                status: 'loaded' as const,
+                isLoading: false,
+                isError: false,
+                isLoaded: true,
+            }
+        }
+    }, [value]) satisfies ObservableValue<Data>
+
+    return data
+}

package/src/useReactions.ts

@@ -0,0 +1,21 @@
+import { MessageReactions, Space, assert } from '@towns-labs/sdk'
+import { useSyncAgent } from './useSyncAgent'
+import { type ObservableConfig, useObservable } from './useObservable'
+import { getRoom } from './utils'
+
+/**
+ * Hook to get the reactions of a specific stream.
+ * @param streamId - The id of the stream to get the reactions of.
+ * @param config - Configuration options for the observable.
+ * @returns The reactions of the stream as a map from the message eventId to the reaction.
+ */
+export const useReactions = (
+    streamId: string,
+    config?: ObservableConfig.FromData<Record<string, MessageReactions>>,
+) => {
+    const sync = useSyncAgent()
+    const room = getRoom(sync, streamId)
+    assert(!(room instanceof Space), 'Space does not have reactions')
+
+    return useObservable(room.timeline.reactions, config)
+}

package/src/useRedact.ts

@@ -0,0 +1,45 @@
+'use client'
+
+import { type 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 your own message in a channel stream.
+ * @example
+ *
+ * ### Redact a message
+ *
+ * You can use `redact` to redact a message in a stream.
+ * ```ts
+ * import { useRedact } from '@towns-labs/react-sdk'
+ *
+ * const { redact } = useRedact(streamId)
+ * redact({ 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 useRedact = (streamId: string, config?: ActionConfig<Channel['redact']>) => {
+    const sync = useSyncAgent()
+    const room = getRoom(sync, streamId)
+    assert(!(room instanceof Space), 'Space does not have reactions')
+    const { action: redact, ...rest } = useAction(room, 'redact', config)
+
+    return {
+        redact,
+        ...rest,
+    }
+}

package/src/useScrollback.ts

@@ -0,0 +1,31 @@
+'use client'
+
+import { type MessageTimeline, Space, assert } from '@towns-labs/sdk'
+import { useMemo } from 'react'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { useSyncAgent } from './useSyncAgent'
+import { getRoom } from './utils'
+
+/**
+ * Hook to get the scrollback action for a stream.
+ *
+ * Scrollback is the action of getting miniblocks from a stream before a certain point in time.
+ * Getting miniblocks means that new events that are possibly new messages, reactions and so on are fetched.
+ *
+ * @param streamId - The id of the stream to get the scrollback action for.
+ * @param config - Configuration options for the action.
+ * @returns The `scrollback` action and its loading state.
+ */
+export const useScrollback = (
+    streamId: string,
+    config?: ActionConfig<MessageTimeline['scrollback']>,
+) => {
+    const sync = useSyncAgent()
+    const room = useMemo(() => getRoom(sync, streamId), [sync, streamId])
+    assert(!(room instanceof Space), 'cant scrollback spaces')
+    const { action: scrollback, ...rest } = useAction(room.timeline, 'scrollback', config)
+    return {
+        scrollback,
+        ...rest,
+    }
+}

package/src/useSendMessage.ts

@@ -0,0 +1,35 @@
+'use client'
+
+import { Channel, Space, assert } from '@towns-labs/sdk'
+import { useMemo } from 'react'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { useSyncAgent } from './useSyncAgent'
+import { getRoom } from './utils'
+
+/**
+ * Hook to send a message to a stream. Can be used to send a message to a channel or a dm/group dm.
+ * @param streamId - The id of the stream to send the message to.
+ * @param config - Configuration options for the action.
+ * @returns The sendMessage action and the status of the action.
+ */
+export const useSendMessage = (
+    streamId: string,
+    // TODO: now that we're using runtime check for room type, Gdm/Dm will have the same config as Channel.
+    // Its not a problem, both should be the same, but we need more abstractions around this on the SyncAgent
+    config?: ActionConfig<Channel['sendMessage']>,
+) => {
+    const sync = useSyncAgent()
+    const room = useMemo(() => getRoom(sync, streamId), [streamId, sync])
+    assert(!(room instanceof Space), 'room cant be a space')
+    const { action: sendMessage, ...rest } = useAction(room, 'sendMessage', config)
+
+    return {
+        /** Sends a message to the stream.
+         * @param message - The message to send.
+         * @param options - Additional options for the message.
+         * @returns The event id of the message.
+         */
+        sendMessage,
+        ...rest,
+    }
+}

package/src/useSendReaction.ts

@@ -0,0 +1,39 @@
+'use client'
+
+import { type Channel, Space, assert } from '@towns-labs/sdk'
+import { type ActionConfig, useAction } from './internals/useAction'
+import { useSyncAgent } from './useSyncAgent'
+import { getRoom } from './utils'
+
+/**
+ * Hook to send a reaction to a message in a stream.
+ *
+ * Reaction can be any string value, including emojis.
+ *
+ * @example
+ * ```ts
+ * import { useSendReaction } from '@towns-labs/react-sdk'
+ *
+ * const { sendReaction } = useSendReaction('stream-id')
+ * sendReaction(messageEventId, '🔥')
+ * ```
+ *
+ * @param streamId - The id of the stream to send the reaction to.
+ * @param config - Configuration options for the action.
+ * @returns The `sendReaction` action and its loading state.
+ */
+export const useSendReaction = (
+    streamId: string,
+    config?: ActionConfig<Channel['sendReaction']>,
+) => {
+    const sync = useSyncAgent()
+    const room = getRoom(sync, streamId)
+    assert(!(room instanceof Space), 'Space does not have reactions')
+
+    const { action: sendReaction, ...rest } = useAction(room, 'sendReaction', config)
+
+    return {
+        sendReaction,
+        ...rest,
+    }
+}

package/src/useSpace.ts

@@ -0,0 +1,30 @@
+'use client'
+
+import { useMemo } from 'react'
+import type { Space } from '@towns-labs/sdk'
+import { useSyncAgent } from './useSyncAgent'
+import { type ObservableConfig, useObservable } from './useObservable'
+
+/**
+ * Hook to get data about a space.
+ * You can use this hook to get space metadata and ids of channels in the space.
+ * @param spaceId - The id of the space to get data about.
+ * @param config - Configuration options for the observable.
+ * @returns The SpaceModel data.
+ * @example
+ * You can use this hook to display the data about a space:
+ *
+ * ```tsx
+ * import { useSpace } from '@towns-labs/react-sdk'
+ *
+ * const Space = ({ spaceId }: { spaceId: string }) => {
+ *     const { data: space } = useSpace(spaceId)
+ *     return <div>{space.metadata?.name || 'Unnamed Space'}</div>
+ * }
+ * ```
+ */
+export const useSpace = (spaceId: string, config?: ObservableConfig.FromObservable<Space>) => {
+    const sync = useSyncAgent()
+    const observable = useMemo(() => sync.spaces.getSpace(spaceId), [sync, spaceId])
+    return useObservable(observable, config)
+}

package/src/useThreads.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+import { Space, TimelinesMap, assert } from '@towns-labs/sdk'
+import { useSyncAgent } from './useSyncAgent'
+import { type ObservableConfig, useObservable } from './useObservable'
+import { getRoom } from './utils'
+
+/**
+ * Hook to get the threads from a stream.
+ *
+ * @param streamId - The id of the stream to get the threads from.
+ * @param config - Configuration options for the observable.
+ * @returns The threads of the stream as a map from the message eventId to a thread.
+ */
+export const useThreads = (
+    streamId: string,
+    config?: ObservableConfig.FromObservable<TimelinesMap>,
+) => {
+    const sync = useSyncAgent()
+    const room = useMemo(() => getRoom(sync, streamId), [streamId, sync])
+    assert(!(room instanceof Space), 'room cant be a space')
+    return useObservable(room.timeline.threads, config)
+}

package/src/useTimeline.ts

@@ -0,0 +1,35 @@
+import { Space, type TimelineEvent, assert } from '@towns-labs/sdk'
+import { useMemo } from 'react'
+import { type ObservableConfig, useObservable } from './useObservable'
+import { getRoom } from './utils'
+import { useSyncAgent } from './useSyncAgent'
+
+/**
+ * Hook to get the timeline events from a stream.
+ *
+ * You can use the `useTimeline` hook to get the timeline events from a channel stream, dm stream or group dm stream
+ *
+ * @example
+ * ```ts
+ * import { useTimeline } from '@towns-labs/react-sdk'
+ * import { RiverTimelineEvent } from '@towns-labs/sdk'
+ *
+ * const { data: events } = useTimeline(streamId)
+ *
+ * // You can filter the events by their kind
+ * const messages = events.filter((event) => event.content?.kind === RiverTimelineEvent.ChannelMessage)
+ * ```
+ *
+ * @param streamId - The id of the stream to get the timeline events from.
+ * @param config - Configuration options for the observable.
+ * @returns The timeline events of the stream as an observable.
+ */
+export const useTimeline = (
+    streamId: string,
+    config?: ObservableConfig.FromObservable<TimelineEvent[]>,
+) => {
+    const sync = useSyncAgent()
+    const room = useMemo(() => getRoom(sync, streamId), [streamId, sync])
+    assert(!(room instanceof Space), 'Space does not have timeline')
+    return useObservable(room.timeline.events, config)
+}

package/src/useTowns.ts

@@ -0,0 +1,22 @@
+'use client'
+import type { Observable, SyncAgent } from '@towns-labs/sdk'
+import { type ObservableConfig, useObservable } from './useObservable'
+import { useSyncAgent } from './useSyncAgent'
+
+type SyncSelector = SyncAgent['observables']
+
+/**
+ * Hook to get an observable from the sync agent.
+ *
+ * An alternative of our premade hooks, allowing the creation of custom abstractions.
+ * @param selector - A selector function to get a observable from the sync agent.
+ * @param config - Configuration options for the observable.
+ * @returns The data from the selected observable.
+ */
+export function useTowns<T>(
+    selector: (sync: SyncSelector) => Observable<T>,
+    config?: ObservableConfig.FromData<T>,
+) {
+    const syncAgent = useSyncAgent()
+    return useObservable(selector(syncAgent.observables), config)
+}

package/src/useTownsAuthStatus.ts

@@ -0,0 +1,32 @@
+'use client'
+
+import { AuthStatus } from '@towns-labs/sdk'
+import { useTowns } from './useTowns'
+import type { ObservableConfig } from './useObservable'
+
+/**
+ * Hook to get the auth status of the user connection with the Towns network.
+ * @param config - Configuration options for the observable.
+ * @returns An object containing the current AuthStatus status and boolean flags for each possible status.
+ */
+export const useTownsAuthStatus = (config?: ObservableConfig.FromObservable<AuthStatus>) => {
+    const { data: status } = useTowns((s) => s.riverAuthStatus, config)
+    return {
+        /** The current AuthStatus of the user connection with the Towns network. */
+        status,
+        /** Whether the user connection with the Towns network is initializing. */
+        isInitializing: status === AuthStatus.Initializing,
+        /** Whether the user connection with the Towns network is evaluating credentials. */
+        isEvaluatingCredentials: status === AuthStatus.EvaluatingCredentials,
+        /** Whether the user connection with the Towns network is credentialed. */
+        isCredentialed: status === AuthStatus.Credentialed,
+        /** Whether the user connection with the Towns network is connecting to Towns. */
+        isConnectingToTowns: status === AuthStatus.ConnectingToRiver,
+        /** Whether the user connection with the Towns network is connected to Towns. */
+        isConnectedToTowns: status === AuthStatus.ConnectedToRiver,
+        /** Whether the user connection with the Towns network is disconnected. */
+        isDisconnected: status === AuthStatus.Disconnected,
+        /** Whether the user connection with the Towns network is in an error state. */
+        isError: status === AuthStatus.Error,
+    }
+}