@towns-labs/react-sdk 2.0.1

package/README.md

@@ -0,0 +1,69 @@
+# @towns-labs/react-sdk
+
+React Hooks for River SDK.
+
+# Installation
+
+in the future:
+
+```sh
+bun add @towns-labs/react-sdk
+```
+
+# Usage
+
+## Connect to River
+
+`@towns-labs/react-sdk` suggests you to use Wagmi to connect to Towns Protocol.
+Wrap your app with `TownsSyncProvider` and use the `useAgentConnection` hook to connect to Towns Protocol.
+
+> [!NOTE]
+> You'll need to use `useEthersSigner` to get the signer from viem wallet client.
+> You can get the hook from [wagmi docs](https://wagmi.sh/react/guides/ethers#usage-1).
+
+```tsx
+import { TownsSyncProvider, useAgentConnection } from "@towns-labs/react-sdk";
+import { townsEnv } from "@towns-labs/sdk";
+import { WagmiProvider } from "wagmi";
+import { useEthersSigner } from "./utils/viem-to-ethers";
+import { wagmiConfig } from "./config/wagmi";
+
+const townsConfig = townsEnv().makeTownsConfig("beta");
+
+const App = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <TownsSyncProvider>{children}</TownsSyncProvider>
+    </WagmiProvider>
+  );
+};
+
+const ConnectTowns = () => {
+  const { connect, isConnecting, isConnected } = useAgentConnection();
+  const signer = useEthersSigner();
+
+  return (
+    <>
+      <button
+        onClick={async () => {
+          if (!signer) {
+            return;
+          }
+          connect(signer, { townsConfig });
+        }}
+      >
+        {isConnecting ? "Disconnect" : "Connect"}
+      </button>
+      {isConnected && <span>Connected!</span>}
+    </>
+  );
+};
+```
+
+## Get information about an account
+
+## Post messages to a stream
+
+## Subscribe to a stream
+
+## Addding persistance

package/dist/esm/TownsSyncProvider.jsx

@@ -0,0 +1,39 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { TownsSyncContext } from './internals/TownsSyncContext';
+/**
+ * Provides the sync agent to all hooks usage that interacts with the Towns Protocol.
+ *
+ * - If you want to interact with the sync agent directly, you can use the `useSyncAgent` hook.
+ * - If you want to interact with the Towns Protocol using hooks provided by this SDK, you should wrap your App with this provider.
+ *
+ * You can pass an initial sync agent instance to the provider.
+ * This can be useful for persisting authentication.
+ *
+ * @param props - The props for the provider
+ * @returns The provider
+ */
+export const TownsSyncProvider = (props) => {
+    const [syncAgent, setSyncAgent] = useState(() => props.syncAgent);
+    useEffect(() => {
+        setSyncAgent(props.syncAgent);
+    }, [props.syncAgent]);
+    useEffect(() => {
+        if (syncAgent) {
+            syncAgent.start();
+        }
+        return () => {
+            if (syncAgent) {
+                syncAgent.stop();
+            }
+        };
+    }, [syncAgent]);
+    return (<TownsSyncContext.Provider value={{
+            config: props.config,
+            syncAgent,
+            setSyncAgent,
+        }}>
+            {props.children}
+        </TownsSyncContext.Provider>);
+};
+//# sourceMappingURL=TownsSyncProvider.jsx.map

package/dist/esm/TownsSyncProvider.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"TownsSyncProvider.jsx","sourceRoot":"","sources":["../../src/TownsSyncProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAE/D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAQjC,EAAE,EAAE;IACD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACX,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACjC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAA;IAErB,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,SAAS,EAAE,CAAC;YACZ,SAAS,CAAC,KAAK,EAAE,CAAA;QACrB,CAAC;QACD,OAAO,GAAG,EAAE;YACR,IAAI,SAAS,EAAE,CAAC;gBACZ,SAAS,CAAC,IAAI,EAAE,CAAA;YACpB,CAAC;QACL,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACH,CAAC,gBAAgB,CAAC,QAAQ,CACtB,KAAK,CAAC,CAAC;YACH,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,SAAS;YACT,YAAY;SACf,CAAC,CAEF;YAAA,CAAC,KAAK,CAAC,QAAQ,CACnB;QAAA,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAC/B,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/connectTowns.js

@@ -0,0 +1,45 @@
+/// This file can be used on server side to create a Towns Protocol Client
+/// We don't want a 'use client' directive here
+import { SyncAgent, makeSignerContext, makeSignerContextFromBearerToken, } from '@towns-labs/sdk';
+import { ethers } from 'ethers';
+const defaultConfig = {
+    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, config) => {
+    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, config) => {
+    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, config) => {
+    const signerContext = await makeSignerContextFromBearerToken(token);
+    return new SyncAgent({ context: signerContext, ...defaultConfig, ...config });
+};
+//# sourceMappingURL=connectTowns.js.map

package/dist/esm/connectTowns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectTowns.js","sourceRoot":"","sources":["../../src/connectTowns.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,+CAA+C;AAC/C,OAAO,EAEH,SAAS,EAET,iBAAiB,EACjB,gCAAgC,GACnC,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE/B,MAAM,aAAa,GAA6B;IAC5C,kBAAkB,EAAE;QAChB,0BAA0B,EAAE,IAAI;KACnC;CACJ,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,EAC/B,MAAqB,EACrB,MAAwC,EACtB,EAAE;IACpB,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,CAAA;IACnD,MAAM,aAAa,GAAG,MAAM,iBAAiB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;IACrE,OAAO,IAAI,SAAS,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE,CAAC,CAAA;AACjF,CAAC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAC7B,aAA4B,EAC5B,MAAwC,EACtB,EAAE;IACpB,OAAO,IAAI,SAAS,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE,CAAC,CAAA;AACjF,CAAC,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,KAAK,EAC5C,KAAa,EACb,MAAwC,EACtB,EAAE;IACpB,MAAM,aAAa,GAAG,MAAM,gCAAgC,CAAC,KAAK,CAAC,CAAA;IACnE,OAAO,IAAI,SAAS,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE,CAAC,CAAA;AACjF,CAAC,CAAA"}

package/dist/esm/index.js

@@ -0,0 +1,35 @@
+/**************************************************************************
+ * 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';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;4EAE4E;AAC5E,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA"}

package/dist/esm/internals/TownsSyncContext.js

@@ -0,0 +1,4 @@
+'use client';
+import { createContext } from 'react';
+export const TownsSyncContext = createContext(undefined);
+//# sourceMappingURL=TownsSyncContext.js.map

package/dist/esm/internals/TownsSyncContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TownsSyncContext.js","sourceRoot":"","sources":["../../../src/internals/TownsSyncContext.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AASrC,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAoC,SAAS,CAAC,CAAA"}

package/dist/esm/internals/useAction.js

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react';
+/**
+ * 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, fnName, config) => {
+    const [status, setStatus] = useState('idle');
+    const [error, setError] = useState();
+    const [data, setData] = useState();
+    const action = useCallback(async (...args) => {
+        if (!namespace) {
+            throw new Error(`useAction: namespace is undefined`);
+        }
+        const fn = namespace[fnName];
+        if (typeof fn !== 'function') {
+            throw new Error(`useAction: fn ${fnName} is not a function`);
+        }
+        setStatus('loading');
+        try {
+            const data = (await fn.apply(namespace, args));
+            setData(data);
+            setStatus('success');
+            config?.onSuccess?.(data);
+            return data;
+        }
+        catch (error) {
+            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',
+    };
+};
+//# sourceMappingURL=useAction.js.map

package/dist/esm/internals/useAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAction.js","sourceRoot":"","sources":["../../../src/internals/useAction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAsB7C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CACrB,SAAgC,EAChC,MAAoB,EACpB,MAAyB,EAC3B,EAAE;IACA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA2C,MAAM,CAAC,CAAA;IACtF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAqB,CAAA;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAA4B,CAAA;IAE5D,MAAM,MAAM,GAAG,WAAW,CACtB,KAAK,EAAE,GAAG,IAAkC,EAAyB,EAAE;QACnE,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;QACxD,CAAC;QACD,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAiB,CAAA;QAC5C,IAAI,OAAO,EAAE,KAAK,UAAU,EAAE,CAAC;YAC3B,MAAM,IAAI,KAAK,CAAC,iBAAiB,MAAM,oBAAoB,CAAC,CAAA;QAChE,CAAC;QACD,SAAS,CAAC,SAAS,CAAC,CAAA;QACpB,IAAI,CAAC;YACD,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,CAAiB,CAAA;YAC9D,OAAO,CAAC,IAAI,CAAC,CAAA;YACb,SAAS,CAAC,SAAS,CAAC,CAAA;YACpB,MAAM,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,CAAA;YACzB,OAAO,IAAoB,CAAA;QAC/B,CAAC;QAAC,OAAO,KAAc,EAAE,CAAC;YACtB,SAAS,CAAC,OAAO,CAAC,CAAA;YAClB,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;gBACzB,QAAQ,CAAC,KAAK,CAAC,CAAA;gBACf,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YAC5B,CAAC;YACD,kCAAkC;YAClC,MAAM,KAAK,CAAA;QACf,CAAC;gBAAS,CAAC;YACP,SAAS,CAAC,MAAM,CAAC,CAAA;QACrB,CAAC;IACL,CAAC,EACD,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,CAC9B,CAAA;IACD,OAAO;QACH,6BAA6B;QAC7B,MAAM;QACN,uCAAuC;QACvC,IAAI;QACJ,0DAA0D;QAC1D,KAAK;QACL,qCAAqC;QACrC,SAAS,EAAE,MAAM,KAAK,SAAS;QAC/B,wCAAwC;QACxC,SAAS,EAAE,MAAM,KAAK,SAAS;QAC/B,sCAAsC;QACtC,OAAO,EAAE,MAAM,KAAK,OAAO;KAC9B,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/internals/useTownsSync.js

@@ -0,0 +1,5 @@
+'use client';
+import { useContext } from 'react';
+import { TownsSyncContext } from './TownsSyncContext';
+export const useTownsSync = () => useContext(TownsSyncContext);
+//# sourceMappingURL=useTownsSync.js.map

package/dist/esm/internals/useTownsSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTownsSync.js","sourceRoot":"","sources":["../../../src/internals/useTownsSync.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAA"}

package/dist/esm/internals/utils.js

@@ -0,0 +1,10 @@
+export const isPersistedModel = (value) => {
+    if (typeof value !== 'object') {
+        return false;
+    }
+    if (value === null) {
+        return false;
+    }
+    return 'status' in value && 'data' in value;
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/internals/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/internals/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAI,KAA4B,EAA8B,EAAE;IAC5F,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAA;IAChB,CAAC;IACD,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACjB,OAAO,KAAK,CAAA;IAChB,CAAC;IACD,OAAO,QAAQ,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK,CAAA;AAC/C,CAAC,CAAA"}

package/dist/esm/useAdminRedact.js

@@ -0,0 +1,43 @@
+'use client';
+import { Space, assert } from '@towns-labs/sdk';
+import { 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, config) => {
+    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,
+    };
+};
+//# sourceMappingURL=useAdminRedact.js.map

package/dist/esm/useAdminRedact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAdminRedact.js","sourceRoot":"","sources":["../../src/useAdminRedact.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAW,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAqB,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAgB,EAAE,MAA6C,EAAE,EAAE;IAC9F,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;IACpC,MAAM,CAAC,CAAC,CAAC,IAAI,YAAY,KAAK,CAAC,EAAE,qCAAqC,CAAC,CAAA;IACvE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,GAAG,SAAS,CAAC,IAAI,EAAE,aAAa,EAAE,MAAM,CAAC,CAAA;IAE/E,OAAO;QACH,WAAW;QACX,GAAG,IAAI;KACV,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/useAgentConnection.js

@@ -0,0 +1,128 @@
+import { useCallback, useMemo, useState } from 'react';
+import { connectTownsWithBearerToken, signAndConnect } from './connectTowns';
+import { useTownsSync } from './internals/useTownsSync';
+/**
+ * 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, config) => {
+        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, config) => {
+        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,
+    };
+};
+//# sourceMappingURL=useAgentConnection.js.map

package/dist/esm/useAgentConnection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAgentConnection.js","sourceRoot":"","sources":["../../src/useAgentConnection.ts"],"names":[],"mappings":"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"}

package/dist/esm/useChannel.js

@@ -0,0 +1,18 @@
+'use client';
+import { useMemo } from 'react';
+import { useSyncAgent } from './useSyncAgent';
+import { 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, channelId, config) => {
+    const sync = useSyncAgent();
+    const channel = useMemo(() => sync.spaces.getSpace(spaceId).getChannel(channelId), [sync.spaces, spaceId, channelId]);
+    return useObservable(channel, config);
+};
+//# sourceMappingURL=useChannel.js.map

package/dist/esm/useChannel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannel.js","sourceRoot":"","sources":["../../src/useChannel.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEtE;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CACtB,OAAe,EACf,SAAiB,EACjB,MAAiD,EACnD,EAAE;IACA,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,MAAM,OAAO,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,EACzD,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,CACpC,CAAA;IACD,OAAO,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;AACzC,CAAC,CAAA"}

package/dist/esm/useCreateChannel.js

@@ -0,0 +1,24 @@
+'use client';
+import { useMemo } from 'react';
+import { 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, config) => {
+    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,
+    };
+};
+//# sourceMappingURL=useCreateChannel.js.map

package/dist/esm/useCreateChannel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateChannel.js","sourceRoot":"","sources":["../../src/useCreateChannel.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAGZ,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAqB,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC5B,OAAe,EACf,MAA6C,EAC/C,EAAE;IACA,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;IAClF,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,CAAC,CAAA;IAEpF,OAAO;QACH;;;;WAIG;QACH,aAAa;QACb,GAAG,IAAI;KACV,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/useCreateDm.js

@@ -0,0 +1,22 @@
+'use client';
+import { 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) => {
+    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,
+    };
+};
+//# sourceMappingURL=useCreateDm.js.map

package/dist/esm/useCreateDm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateDm.js","sourceRoot":"","sources":["../../src/useCreateDm.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAGZ,OAAO,EAAqB,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAsC,EAAE,EAAE;IAClE,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,UAAU,EAAE,MAAM,CAAC,CAAA;IAE7E,OAAO;QACH;;;;WAIG;QACH,QAAQ;QACR,GAAG,IAAI;KACV,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/useCreateGdm.js

@@ -0,0 +1,22 @@
+'use client';
+import { 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) => {
+    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,
+    };
+};
+//# sourceMappingURL=useCreateGdm.js.map

package/dist/esm/useCreateGdm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateGdm.js","sourceRoot":"","sources":["../../src/useCreateGdm.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAGZ,OAAO,EAAqB,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAwC,EAAE,EAAE;IACrE,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,CAAA;IAEhF,OAAO;QACH;;;;WAIG;QACH,SAAS;QACT,GAAG,IAAI;KACV,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/useCreateSpace.js

@@ -0,0 +1,22 @@
+'use client';
+import { 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 = {}) => {
+    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,
+    };
+};
+//# sourceMappingURL=useCreateSpace.js.map

package/dist/esm/useCreateSpace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateSpace.js","sourceRoot":"","sources":["../../src/useCreateSpace.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAGZ,OAAO,EAAqB,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAA8C,EAAE,EAAE,EAAE;IAC/E,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,CAAC,CAAA;IAEtF,OAAO;QACH;;;;WAIG;QACH,WAAW;QACX,GAAG,IAAI;KACV,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/useDm.js

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { useSyncAgent } from './useSyncAgent';
+import { 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, config) => {
+    const sync = useSyncAgent();
+    const dm = useMemo(() => sync.dms.getDm(streamId), [streamId, sync]);
+    return useObservable(dm, config);
+};
+//# sourceMappingURL=useDm.js.map

package/dist/esm/useDm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDm.js","sourceRoot":"","sources":["../../src/useDm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEtE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAgB,EAAE,MAA2C,EAAE,EAAE;IACnF,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,MAAM,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAA;IACpE,OAAO,aAAa,CAAC,EAAE,EAAE,MAAM,CAAC,CAAA;AACpC,CAAC,CAAA"}